merge

dist/js/index-legacy-1174ef25.js~feature-tianyong-newVersion

@@ -0,0 +1 @@
+System.register(["./index-legacy-830019c1.js"],(function(e,t){"use strict";var i,n,a,o,r,s,d,l,c=document.createElement("style");return c.textContent="._skeleton_vtlsh_1{position:fixed;left:0;top:0;width:100vw;height:100vh;padding:.53333rem .8rem;background-color:#fff;z-index:1000;--van-skeleton-paragraph-height: .8rem}._detail_vtlsh_12{width:100vw;height:100vh;overflow:hidden;overflow-y:auto;--header-height: 1.65333rem;background:var(--container-background)}._detail_vtlsh_12 ._container_vtlsh_20{margin:0 .26667rem;border-radius:.26667rem}._detail_vtlsh_12 #musicAndSelection{overflow:initial!important;height:initial!important;max-height:initial!important}\n",document.head.appendChild(c),{setters:[e=>{i=e.d,n=e.g,a=e.n,o=e.cc,r=e.c,s=e.m,d=e.f,l=e.aw}],execute:function(){const t="_detail_vtlsh_12",c="_container_vtlsh_20";e("default",i({name:"music-list",setup(){const e=n(),i=a({isLoading:!0,isProductLoading:!1,product:[{state:!1,name:"五线谱",type:o.staff,base64:""},{state:!1,name:"首调",type:o.firstTone,base64:""},{state:!1,name:"固定调",type:o.fixedTone,base64:""}]});r((()=>{window.appName="colexiu",s.xmlUrl=e.xmlUrl,i.isLoading=!1}));const h=async()=>{console.log("渲染完成")};return()=>d("div",{class:t},[d("div",{id:"scrollContainer",class:[c,"hideCursor"]},[!i.isLoading&&d(l,{onRendered:h},null)])])}}))}}}));

src/helpers/metronome.ts

@@ -292,6 +292,7 @@ class Metronome {
 						numerator: note?.noteElement?.sourceMeasure?.ActiveTimeSignature?.numerator || 0,
 						start: note.measures[0].time,
 						end: note.measures[note.measures.length - 1].endtime,
+						// bug todo  弱起的时候 根据音符结尾时间减去音符开头时间，得到的不是正常小节的时间，然后平均分配节拍之后，当前节拍间隔会非常短
 						time: note.measures[note.measures.length - 1].endtime - note.measures[0].time,
 						stave_x: note?.noteElement?.sourceMeasure?.verticalMeasureList?.[0]?.stave?.x || 0,
 						end_x: note?.stave?.end_x || 0 || 0,
@@ -346,7 +347,7 @@ class Metronome {
 				}
 			}
 		}
-		console.log(measures, measures.length,'小节汇总');
+		//console.log(measures, measures.length,'小节汇总');
 
 		let metroList: number[] = [];
 		const metroMeasure: any[] = [];
@@ -384,7 +385,7 @@ class Metronome {
 		} catch (error) {
 			console.log(error);
 		}
-		// console.log('节拍器',metroList, metroMeasure);
+		console.log('节拍器',metroList, metroMeasure);
 		// 5.得到所有的节拍时间
 		metronomeData.metroList = metroList;
 		metronomeData.metroMeasure = metroMeasure;

src/page-instrument/evaluat-model/index.module.less

@@ -33,7 +33,23 @@
       height: 100%;
     }
   }
-
+.operatingBtn{
+    position: fixed;
+    right: 30px;
+    bottom: 0;
+    height: var(--header-height);
+    z-index: 99;
+    display: flex;
+    align-items: center;
+    .iconBtn{
+        width: 50px;
+        height: 50px;
+        cursor: pointer;
+        & + .iconBtn{
+            margin-left: 20px;
+        }
+    }
+}
 .dialogueBox {
     position: fixed;
     bottom: -1px;

src/page-instrument/evaluat-model/index.tsx

@@ -17,10 +17,12 @@ import startData from "./data/start.json";
 import startingData from "./data/starting.json";
 import iconTastBg from "./icons/task-bg.svg";
 import iconEvaluat from "./icons/evaluating.json";
+import { headImg } from "/src/page-instrument/header-top/image";
 import { api_musicPracticeRecordVideoUpload } from "../api";
 // import DelayCheck from "./delay-check";
 import { headTopData } from "../header-top/index";
 import { getQuery } from "/src/utils/queryString";
+import Countdown from "./countdown"
 
 const DelayCheck = defineAsyncComponent(() =>
   import('./delay-check')
@@ -362,7 +364,7 @@ export default defineComponent({
     });
     return () => (
       <div>
-        <Transition name="pop-center">
+        {/* <Transition name="pop-center">
           {evaluatingData.websocketState && !evaluatingData.startBegin && evaluatingData.checkEnd && (
             <div class={styles.startBtn} onClick={() => {
               startBtnHandle()
@@ -377,9 +379,22 @@ export default defineComponent({
               <img src={iconEvaluat.evaluatingEnd} />
             </div>
           )}
-        </Transition>
-
-        <div style={{ display: !evaluatingData.startBegin && !evaluatingData.soundEffectMode ? "" : "none" }} class={styles.dialogueBox} key="start">
+        </Transition> */}
+        <div class={styles.operatingBtn}>
+          {evaluatingData.websocketState && !evaluatingData.startBegin && evaluatingData.checkEnd && (
+              <img class={styles.iconBtn} src={headImg("icon_play.png")} 
+              onClick={() => {
+                startBtnHandle()
+              }} />
+            )}
+          {evaluatingData.websocketState && evaluatingData.startBegin && (
+            <>
+              <img class={styles.iconBtn} src={headImg("icon_reset.png")} onClick={()=>handleEvaluatResult("tryagain")} />  
+              <img class={styles.iconBtn} src={headImg("submit.png")} onClick={() => handleEndBegin()}/> 
+            </>
+          )} 
+        </div>
+        {/* <div style={{ display: !evaluatingData.startBegin && !evaluatingData.soundEffectMode ? "" : "none" }} class={styles.dialogueBox} key="start">
           <div class={styles.dialogue}>
             <img class={styles.dialoguebg} src={iconTastBg} />
             <div>演奏前请调整好乐器，保证最佳演奏状态。</div>
@@ -389,7 +404,7 @@ export default defineComponent({
         <div style={{ display: evaluatingData.startBegin ? "" : "none" }} class={styles.dialogueBox} key="start">
           <div class={styles.dialogueing}>收音中...</div>
           <Vue3Lottie class={styles.dialogueIcon} animationData={startingData}></Vue3Lottie>
-        </div>
+        </div> */}
 
         {evaluatingData.soundEffectMode && (
           <DelayCheck
@@ -400,7 +415,8 @@ export default defineComponent({
             onBack={() => handleDelayBack()}
           />
         )}
-
+        {/* 倒计时 */}
+        <Countdown />
         {/* 预加载延迟检测组建 */}
         {/* {evaluatingData.preloadJson && !evaluatingData.jsonLoadDone && (
             <div class={styles.preJson}>

src/page-instrument/follow-model/index.module.less

@@ -66,4 +66,22 @@
       border-radius: 50%;
       transform: rotate(-20deg);
   }
+}
+
+.operatingBtn{
+  position: fixed;
+  right: 30px;
+  bottom: 0;
+  height: var(--header-height);
+  z-index: 99;
+  display: flex;
+  align-items: center;
+  .iconBtn{
+      width: 50px;
+      height: 50px;
+      cursor: pointer;
+      & + .iconBtn{
+          margin-left: 20px;
+      }
+  }
 }

src/page-instrument/follow-model/index.tsx

@@ -6,13 +6,14 @@ import { Popup } from "vant";
 import Microphone from "./microphone";
 import state, { IPlatform } from "/src/state";
 import PcEndIcon from "../header-top/image/pc_end_icon.png"
+import { headImg } from "/src/page-instrument/header-top/image";
 
 export default defineComponent({
 	name: "follow-model",
 	setup() {
 		return () => (
 			<>
-				<Transition name="pop-center">
+				{/* <Transition name="pop-center">
 					{!followData.start && (
 						<div class={styles.startBtn} key="start">
 							<img
@@ -35,13 +36,27 @@ export default defineComponent({
 							/>
 						</div>
 					)}
-				</Transition>
-				<div style={{ display: followData.start ? "" : "none" }} class={styles.noteState}>
+				</Transition> */}
+				<div class={styles.operatingBtn}>
+					{!followData.start && (
+						<img class={styles.iconBtn} src={headImg("icon_play.png")} 
+						onClick={() => {
+							handleFollowStart()
+						}} />
+						)}
+					{followData.start && (
+						<>
+						<img class={styles.iconBtn} src={headImg("icon_reset.png")} onClick={()=>handleFollowEnd()} />  
+						<img class={styles.iconBtn} src={headImg("submit.png")} onClick={() => handleFollowEnd()}/> 
+						</>
+					)} 
+				</div>				
+				{/* <div style={{ display: followData.start ? "" : "none" }} class={styles.noteState}>
 					<span style={{ background: "#ffca67" }} class={styles.dot}></span>
 					<span>低</span>
 					<span style={{ background: "rgb(255, 0, 0)" }} class={styles.dot}></span>
 					<span>高</span>
-				</div>
+				</div> */}
 				<Popup
 					teleport="body"
 					closeOnClickOverlay={false}

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

@@ -9,7 +9,7 @@ import { Badge, Circle, Popover, Popup, showConfirmDialog, showToast, NoticeBar
 import Speed from "./speed";
 import { evaluatingData, handleStartEvaluat } from "/src/view/evaluating";
 import Settting from "./settting";
-import state, { IPlatform, handleChangeSection, handleResetPlay, handleRessetState, togglePlay, IPlayState } from "/src/state";
+import state, { IPlatform, handleChangeSection, handleResetPlay, handleRessetState, togglePlay, IPlayState, refreshMusicSvg } from "/src/state";
 import { getAudioCurrentTime } from "/src/view/audio-list";
 import { followData, toggleFollow } from "/src/view/follow-practice";
 import { api_back } from "/src/helpers/communication";
@@ -78,6 +78,11 @@ export const headTopData = reactive({
       // evaluatingData.rendered = true;
       // evaluatingData.soundEffectMode = true;
     } else if (value === "follow") {
+      // 跟练模式，只有一行谱模式
+      if (!state.isSingleLine) {
+        state.isSingleLine = true
+        refreshMusicSvg()
+      }
       toggleFollow();
     }
     headTopData.modeType = "show";

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

@@ -48,6 +48,10 @@ export default defineComponent({
                         <div class={styles.cellBox}>
                             <div class={styles.tit}>旋律线</div>
                             <Switch v-model={smoothAnimationState.isShow.value}></Switch>
+                        </div>                            
+                        <div class={styles.cellBox}>
+                            <div class={styles.tit}>延迟检测</div>
+                            <Switch v-model={state.setting.soundEffect}></Switch>
                         </div>                       
                         <div class={styles.cellBox}>
                             <div class={styles.tit}>标准音高</div>
@@ -68,22 +72,26 @@ export default defineComponent({
                                 <div class={styles.timeName}>毫秒</div>    
                             </div>
                         </div>
-                        <div class={styles.cellBox}>
-                            <div class={styles.tit}>切换谱面</div>
-                            <div class={styles.radioBox}>
-                                {
-                                    [{name:'单行谱',value:true},{name:'多行谱',value:false}].map(item=>{
-                                        return <div class={ state.isSingleLine===item.value && styles.active } onClick={ ()=>{ 
-                                            state.isSingleLine = item.value 
-                                            // resetRenderMusicScore(state.musicRenderType)
-                                            headTopData.settingMode = false
-                                            refreshMusicSvg();
-                                            // musicScoreRef.value?.refreshMusicScore()
-                                        } }>{item.name}</div>
-                                    })
-                                }
-                            </div>
-                        </div>
+                        {/** 练习模式才有单行/多行谱切换功能，跟练、评测只有单行谱模式 */}
+                        {
+                            state.modeType === 'practise' ? 
+                            <div class={styles.cellBox}>
+                                <div class={styles.tit}>切换谱面</div>
+                                <div class={styles.radioBox}>
+                                    {
+                                        [{name:'单行谱',value:true},{name:'多行谱',value:false}].map(item=>{
+                                            return <div class={ state.isSingleLine===item.value && styles.active } onClick={ ()=>{ 
+                                                state.isSingleLine = item.value 
+                                                // resetRenderMusicScore(state.musicRenderType)
+                                                headTopData.settingMode = false
+                                                refreshMusicSvg();
+                                                // musicScoreRef.value?.refreshMusicScore()
+                                            } }>{item.name}</div>
+                                        })
+                                    }
+                                </div>
+                            </div> : null                        
+                        }
                         <div class={styles.cellBox}>
                             <div class={styles.tit}>转谱</div>
                             <div class={styles.radioBox}>

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

@@ -20,6 +20,14 @@
     &.practise{
         background: url("./images/bg1.png") no-repeat;
         background-size: 100% 100%;
+    }    
+    &.follow{
+        background: url("./images/bg3.png") no-repeat;
+        background-size: 100% 100%;
+    }    
+    &.evaluating{
+        background: url("./images/bg2.png") no-repeat;
+        background-size: 100% 100%;
     }
 
     .headHeight {
@@ -39,7 +47,6 @@
         position: sticky;
         top: 36px;
         height: calc(100vh - 36px);
-        margin: 0 10px;
         border-radius: 10px;
         transition: height .2s;
         transition: padding-bottom .2s;
@@ -47,7 +54,6 @@
     }
     .pcContainer {
         height: calc(100vh - var(--header-height) - var(--pc-header-height));
-        margin: 0 24px;
     }
     .fingeringCon{
         transition: scale 0.2s;

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

@@ -36,6 +36,7 @@ import tickWav from "/src/assets/tick.mp3";
 import AuthorName from "../component/authorName"
 import { initSmoothAnimation } from "./smoothAnimation"
 import EmptyMusic, { isEmptyMusicShow } from "./emptyMusic"
+import { position } from "html2canvas/dist/types/css/property-descriptors/position";
 
 const DelayCheck = defineAsyncComponent(() =>
   import('/src/page-instrument/evaluat-model/delay-check')
@@ -294,7 +295,15 @@ export default defineComponent({
             container: {
               paddingBottom: detailData.headerHide ? state.fingeringInfo.height : state.fingeringInfo.scaleData?.offset
             },
-            fingerBox: detailData.headerHide ? {
+            // 横向指法，跟练&评测模式，默认展示贴底展示
+            fingerBox: (state.modeType === 'follow' || state.modeType === 'evaluating') ? 
+            {
+              height: state.fingeringInfo.height,
+              position: 'absolute',
+              bottom: 0,
+              width: '100%'
+            } : 
+            detailData.headerHide ? {
               height: state.fingeringInfo.height
             } : {
               height: state.fingeringInfo.height,

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

@@ -113,6 +113,10 @@ export function destroySmoothAnimation() {
  * 根据播放时间进度移动处理
  */
 export function moveSmoothAnimationByPlayTime() {
+   // 暂停之后不进行移动了
+   if (state.playState === "paused") {
+      return
+   }
    const currentTime = getAudioCurrentTime()
    if (currentTime <= state.fixtime) return
    if (currentTime > state.times.last()?.endtime) return
@@ -172,7 +176,7 @@ export function moveSmoothAnimation(progress: number, activeIndex: number) {
    )
    // 当移动到屏幕最右边时候 就不进行移动了
    if (
-      (smoothAnimationState.osdmScrollDom?.scrollLeft || 0) + smoothAnimationState.translateXNum + smoothAnimationState.osdmScrollDomWith >
+      (smoothAnimationState.osdmScrollDom?.scrollLeft || 0) + smoothAnimationState.translateXNum + smoothAnimationState.osdmScrollDomWith >=
       smoothAnimationState.canvasDomWith
    ) {
       return
@@ -231,6 +235,12 @@ function move_osmd(nowPointsPos: pointsPosType[0]) {
    } else if (midBotNum > clientMidWidth + clientWidth * 0.45 && midBotNum <= clientMidWidth + clientWidth * 0.5) {
       smoothAnimationState.translateXNum += speed * 5
    }
+   // 最多移动的位置
+   const maxTranslateXNum =
+      smoothAnimationState.canvasDomWith - smoothAnimationState.osdmScrollDomWith - (smoothAnimationState.osdmScrollDom?.scrollLeft || 0)
+   if (smoothAnimationState.translateXNum > maxTranslateXNum) {
+      smoothAnimationState.translateXNum = maxTranslateXNum
+   }
    moveTranslateXNum(smoothAnimationState.translateXNum)
 }
 
@@ -321,8 +331,8 @@ function getPointsPosByBatePos(): pointsPosType {
             x: item.bbox.x,
             // 当为休止符的时候 取最下面的位置*0.9，确保能显示完整
             y:
-               ((((item.frequency === -1 ? 2 * totalAv * 0.9 : item.frequency) - totalAv) / totalAv) * smoothAnimationState.canvasDomHeight) / 2 +
-               smoothAnimationState.canvasDomHeight / 2 // cavans 高度为160 所以基准为80
+               smoothAnimationState.canvasDomHeight / 2 -
+               ((((item.frequency === -1 ? 2 * totalAv * 0.1 : item.frequency) - totalAv) / totalAv) * smoothAnimationState.canvasDomHeight) / 2
          })
       }
       return posArr

src/state.ts

@@ -1708,3 +1708,15 @@ export const refreshMusicSvg = () => {
   }
   musicScoreRef.value?.refreshMusicScore()
 }
+
+// 指法改变显示的时候 osdmScrollDomWith 宽度会变化 所以指法改变的时候这个宽度重新计算
+watch(
+  () => state.setting.displayFingering,
+  () => {
+    nextTick(()=>{
+      if (smoothAnimationState.osdmScrollDom) {
+        smoothAnimationState.osdmScrollDomWith = smoothAnimationState.osdmScrollDom.offsetWidth | 0
+      }
+    })
+  }
+)

src/view/evaluating/index.tsx

@@ -53,6 +53,7 @@ import icon_close from '../abnormal-pop/icon_close.svg'
 import icon_btn from '../abnormal-pop/icon_btn.svg'
 import icon_success from '../abnormal-pop/icon_success.svg'
 import { data } from '../../page-instrument/custom-plugins/work-index'
+import { startCountdown } from "/src/page-instrument/evaluat-model/countdown"
 
 const browserInfo = browser();
 
@@ -363,6 +364,8 @@ export const handleStartBegin = async (preTimes?: number) => {
 	}
 	evaluatingData.startBegin = true;
 	if (evaluatingData.isDisabledPlayMusic) {
+		// 先播放倒计时
+		await startCountdown()
 		state.playState = state.playState === "paused" ? "play" : "paused";
 		// 设置为开始播放时, 如果需要节拍,先播放节拍器
 		if (state.playState === "play" && (state.playType==="play"&&state.needTick)||(state.playType==="sing"&&state.needSingTick)) {

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

@@ -12,10 +12,10 @@
             width: 0;
             display: none;
         }
-        & > div {
-            transform: scale(var(--music-zoom));
-            transform-origin: left top;
-        }
+        // & > div {
+        //     transform: scale(var(--music-zoom));
+        //     transform-origin: left top;
+        // }
         #osmdCanvasPage1{
             position: absolute !important;
             left: 0;

src/view/plugins/toggleMusicSheet/choosePartName/index.module.less

@@ -1,119 +1,77 @@
 .container {
-  display: flex;
-  flex-direction: column;
-  width: 50vw;
-  height: 80vh;
-  max-height: 500px;
-  background-color: #fff;
-  overflow: hidden;
-
-  .top {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 8px 10px;
-    position: relative;
-    font-size: 14Px;
-    z-index: 999;
-    &::before {
-      content: '';
-      position: absolute;
-      left: 4px;
-      top: 50%;
-      height: 30%;
-      transform: translateY(-50%);
-      width: 2px;
-      background-color: var(--van-primary-color);
-      border-radius: 2px;
-    }
-  }
-
-  .closeIcon{
-    width: 15px;
-    height: 15px;
-    margin: 0 10px;
-    position: relative; 
-    cursor: pointer;
-  }
-  .closeIcon::before,
-  .closeIcon::after{
-      content: "";
-      position: absolute;
-      height: 15px;
-      width: 1.5px;
-      top: 4px;
-      right: 9px;
-      background: #000;
+  .head {
+      background: url("../../../../page-instrument/header-top/image/headImg.png") no-repeat;
+      background-size: 100% 100%;
+      width: 372px;
+      height: 57px;
+      position: relative;
+      .headTit{
+          position: absolute;
+          bottom: 9px;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 38px;
+          height: 18px;
+      }        
+      .closeImg{
+          position: absolute;
+          top: 0;
+          right: -38px;
+          width: 32px;
+          height: 32px;
+          cursor: pointer;
+      }
   }
-  .closeIcon::before{
-      transform: rotate(45deg);
+  .pickerCon{
+    width: 354px;
+    height: 284px;
+    background: #B0D8FF;
+    box-shadow: 0px 4px 0px 0px #7AAEE0;
+    border-radius: 0px 0px 24px 24px;
+    margin: 0 auto;
+    padding: 10px;
+    .pickerBox{
+      width: 100%;
+      height: 100%;
+      background: #EAF2FB;
+      border-radius: 12px;
+    }
   }
-  .closeIcon::after{
-      transform: rotate(-45deg);
-  }   
-
   .picker {
-    flex: 1;
-    height: 100px;
+    height: 204px;
+    overflow: hidden;
+    background-color: initial;
     display: flex;
     align-items: center;
-    justify-content: center;
-    :global {
-      .van-picker__columns {
-        //height: 80% !important;
+    :global{
+      .van-picker__mask {
+        background-image: initial;
       }
-    }
-    &.pcPicker {
-      :global {
-        .van-ellipsis {
-          font-size: 20PX;
-        }
-        .van-picker-column__item {
-          height: 60px;
+      .van-picker__columns{
+        width: 100%;
+      }
+      .van-picker-column__wrapper{
+        padding: 0 16px;
+      }
+      .van-picker-column__item{
+        font-weight: 600;
+        font-size: 15px;
+        color: rgba(0,0,0,0.2);
+        &.van-picker-column__item--selected{
+          border-top: 1px solid #D5E0ED;
+          border-bottom: 1px solid #D5E0ED;
+          color: rgb(0,0,0);
         }
       }
     }
   }
-
   .button {
-    width: 50%;
-    height: 40Px;
-    margin: 10Px auto;
-    position: relative;
+    cursor: pointer;
+    width: 118px;
+    height: 40px;
+    margin: 10px auto 0;
     z-index: 9;
-  }
-  &.pcContainer {
-    width: 500PX;
-    height: 380PX;
-    border-radius: 16PX;
-    .button {
-      width: 40%;
-      margin-bottom: 30PX;
-    }
-    .title {
-      font-size: 20PX;
-    }
-    .closeIcon {
-      margin: initial !important;
-      top: -6PX;
-    }
-    .top {
-      padding-left: 30PX;
-      &::before { 
-        left: 20PX;
-      }
-    }
-    :global {
-      .van-button__content {
-        font-size: 20PX;
-      }
-    }
-  }
-}
-.pcPartTop {
-  z-index: 9999;
-  height: 12px;
-  &.pcPartTopZIndex {
-    z-index: 1;
+    background: url("./imgs/okBtn.png") no-repeat;
+    background-size: 100% 100%;
   }
 }

src/view/plugins/toggleMusicSheet/choosePartName/index.tsx

@@ -2,6 +2,8 @@ import { PropType, computed, defineComponent, ref, toRefs, onMounted } from 'vue
 import { Picker, Button, Icon } from 'vant'
 import styles from './index.module.less'
 import state, { IPlatform } from "/src/state";
+import changeName from "./imgs/changeName.png"
+import { headImg } from "/src/page-instrument/header-top/image";
 
 export default defineComponent({
   name: 'choosePartName',
@@ -38,37 +40,38 @@ export default defineComponent({
 		});
     return () => (
       <div class={[styles.container, state.platform === IPlatform.PC && styles.pcContainer]}>
+        <div class={styles.head}>
+          <img class={styles.headTit} src={changeName} />
+          <img class={styles.closeImg} src={headImg("closeImg.png")} onClick={() => emit("close")} />
+        </div>
         { state.platform === IPlatform.PC && <div class={[!state.guideInfo?.teacherDrag && styles.pcPartTopZIndex ,styles.pcPartTop,'top_drag']}></div> }
-        <div class={styles.top}>
-          <div class={styles.title}>请选择您练习的乐器</div>
-          {/* <Icon name="cross" size={24} onClick={() => emit('close')} /> */}
-          <span class={styles.closeIcon} onClick={() => emit("close")}></span>
+        <div class={styles.pickerCon}>
+          <div class={styles.pickerBox}>
+            <Picker
+              ref={myPicker}
+              class={[styles.picker, state.platform === IPlatform.PC && styles.pcPicker]}
+              defaultIndex={props.partIndex}
+              v-model={selValues.value}
+              showToolbar={false}
+              columns={columns.value}
+              visibleItemCount={Math.ceil(document.body.clientHeight / 40 / 3)}
+              onChange={(row) => {
+                // console.log(1111,'选择的索引', row)
+                if (!partIndexChanged.value) partIndexChanged.value = true
+                selectIndex.value = row.selectedValues[0]
+              }}
+            />
+            <div class={styles.button} onClick={() => {
+                // console.log(1111,selectIndex.value)
+                if (partIndexChanged.value) {
+                  emit('close', selectIndex.value)
+                } else {
+                  emit('close', partIndex.value)
+                }
+              }
+            }></div>
+          </div>
         </div>
-        <Picker
-          ref={myPicker}
-          class={[styles.picker, state.platform === IPlatform.PC && styles.pcPicker]}
-          defaultIndex={props.partIndex}
-          v-model={selValues.value}
-          showToolbar={false}
-          columns={columns.value}
-          visibleItemCount={Math.ceil(document.body.clientHeight / 44 / 3)}
-          onChange={(row) => {
-            // console.log(1111,'选择的索引', row)
-            if (!partIndexChanged.value) partIndexChanged.value = true
-            selectIndex.value = row.selectedValues[0]
-          }}
-        />
-        <Button class={styles.button} type="primary" round block onClick={() => {
-            // console.log(1111,selectIndex.value)
-            if (partIndexChanged.value) {
-              emit('close', selectIndex.value)
-            } else {
-              emit('close', partIndex.value)
-            }
-          }
-        }>
-          确定
-        </Button>
       </div>
     )
   },

src/view/plugins/toggleMusicSheet/index.module.less

@@ -1,16 +1,5 @@
-.iconToggle {
-    position: fixed;
-    left: 0;
-    bottom: 20%;
-    transform: scaleX(-1);
-    z-index: 10;
-    margin: 0;
-    background: rgba(0, 0, 0, 0.24);
-    border-radius: 5px 0px 0px 5px;
-    padding: 7px 3px;
-}
+
 .popup{
-    border-radius: 4px;
     overflow: hidden;
 }
 .pcPartPop {

src/view/plugins/toggleMusicSheet/index.tsx

@@ -107,7 +107,7 @@ export default defineComponent({
     }
 
     return () => (
-      <Popup class={styles.popup} v-model:show={toggleMusicSheet.show} class={[state.platform === IPlatform.PC && styles.pcPartPop ,"switchBoxClass_drag"]} style={positionInfo.styleDrag.value}>
+      <Popup v-model:show={toggleMusicSheet.show} class="popup-custom van-scale center-closeBtn switchBoxClass_drag" transition="van-scale" teleport="body" style={positionInfo.styleDrag.value} overlay-style={{background:'rgba(0, 0, 0, 0.3)'}}>
         <ChoosePartName
           partIndex={trackIdx.value || 0}
           partListNames={partListNames.value}

src/view/tick/index.module.less

@@ -4,6 +4,7 @@
     align-items: center;
     position: absolute;
     transform: translateY(-100%);
+    z-index: 1;
     .dot{
         width: 13Px;
         height: 13Px;