Jelajahi Sumber

Merge branch 'feature-tianyong' into gym-test

TIANYONG 9 bulan lalu
induk
melakukan
68553ba086
27 mengubah file dengan 113 tambahan dan 71 penghapusan
  1. 1 1
      src/page-instrument/api.ts
  2. TEMPAT SAMPAH
      src/page-instrument/component/the-music-list/imgs/icon-music-vip.png
  3. TEMPAT SAMPAH
      src/page-instrument/component/the-music-list/imgs/searImg.png
  4. 3 3
      src/page-instrument/component/the-music-list/index.module.less
  5. 1 1
      src/page-instrument/component/the-music-list/index.tsx
  6. 7 4
      src/page-instrument/component/the-music-list/list.tsx
  7. 4 4
      src/page-instrument/custom-plugins/ExerciseStatistics/index.module.less
  8. 3 3
      src/page-instrument/custom-plugins/guide-driver/index.tsx
  9. 5 5
      src/page-instrument/custom-plugins/helper-model/recommendation/index.module.less
  10. 8 0
      src/page-instrument/evaluat-model/index.tsx
  11. 2 2
      src/page-instrument/header-top/index.module.less
  12. 2 2
      src/page-instrument/header-top/index.tsx
  13. 2 2
      src/page-instrument/header-top/settting/index.module.less
  14. 2 2
      src/page-instrument/header-top/settting/index.tsx
  15. 2 2
      src/page-instrument/header-top/speed/index.tsx
  16. 7 4
      src/page-instrument/view-evaluat-report/component/share-top/index.module.less
  17. 6 6
      src/page-instrument/view-evaluat-report/index.module.less
  18. 13 2
      src/state.ts
  19. 6 5
      src/view/abnormal-pop/index.module.less
  20. 12 8
      src/view/music-score/index.tsx
  21. TEMPAT SAMPAH
      src/view/plugins/toggleMusicSheet/choosePartName/imgs/cancelBtn.png
  22. TEMPAT SAMPAH
      src/view/plugins/toggleMusicSheet/choosePartName/imgs/okBtn.png
  23. 1 1
      src/view/plugins/toggleMusicSheet/choosePartName/index.module.less
  24. 25 13
      src/view/plugins/toggleMusicSheet/choosePartName/index.tsx
  25. 1 1
      src/view/plugins/toggleMusicSheet/index.tsx
  26. TEMPAT SAMPAH
      src/view/selection/imgs/pitchHigh.png
  27. TEMPAT SAMPAH
      src/view/selection/imgs/pitchLow.png

+ 1 - 1
src/page-instrument/api.ts

@@ -44,7 +44,7 @@ export const studentQueryUserInfo = async () => {
       const res = await request.get(`/student/queryUserInfo`);
       const data = res.data.student
       res.data = {
-        instrumentId: res.data.instrumentId,
+        instrumentId: res.data.instrumentId ? res.data.instrumentId.split(',')[0] : "",
         phone:data.phone,
         clientType:"STUDENT",
         id:data.id,

TEMPAT SAMPAH
src/page-instrument/component/the-music-list/imgs/icon-music-vip.png


TEMPAT SAMPAH
src/page-instrument/component/the-music-list/imgs/searImg.png


+ 3 - 3
src/page-instrument/component/the-music-list/index.module.less

@@ -65,8 +65,8 @@
         }
         >img{
             flex-shrink: 0;
-            width: 16px;
-            height: 16px;
+            width: 14px;
+            height: 14px;
         }
         :global{
             .van-field{
@@ -165,10 +165,10 @@
         flex-grow: 1;
         overflow: hidden;
         .name{
+            line-height: 17px;
             font-weight: 600;
             font-size: 16px;
             color: #333333;
-            line-height: 1;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;

+ 1 - 1
src/page-instrument/component/the-music-list/index.tsx

@@ -17,7 +17,7 @@ export default defineComponent({
 	setup() {
 		return () => (
 			<>
-				<Popup class={styles.popup} position="left" v-model:show={musicListShow.value} round overlay-style={{background:'rgba(0, 0, 0, 0.3)'}}>
+				<Popup class={styles.popup} position="left" v-model:show={musicListShow.value} round overlay-style={{background:'rgba(0, 0, 0, 0.7)'}}>
 					<div class={[styles.tabs]}>
 						<Tabs>
 							<Tab title="其他曲谱">

+ 7 - 4
src/page-instrument/component/the-music-list/list.tsx

@@ -125,10 +125,13 @@ export default defineComponent({
                 </div>
                 <div class={styles.content}>
                   <p class={styles.name}>{item.musicSheetName}</p>
-                  <div class={styles.detail}>
-                    {/* {item.usedNum && <div class={styles.usedNum}><img src={huoimg}/><div>{formatNumber(item.usedNum)}</div></div>} */}
-                    {item.composer && <p class={styles.author}>{item.composer}</p>}
-                  </div>
+                  {
+                    item.composer &&                   
+                    <div class={styles.detail}>
+                      {/* {item.usedNum && <div class={styles.usedNum}><img src={huoimg}/><div>{formatNumber(item.usedNum)}</div></div>} */}
+                      <p class={styles.author}>{item.composer}</p>
+                    </div>
+                  }
                 </div>
               </div>
             );

+ 4 - 4
src/page-instrument/custom-plugins/ExerciseStatistics/index.module.less

@@ -1,7 +1,7 @@
 .exerciseStatistics {
     position: fixed;
     left: 12px;
-    bottom: 26px;
+    bottom: 28px;
     box-sizing: border-box;
     z-index: 110;
     div {
@@ -21,8 +21,8 @@
     .icon {
         position: relative;
         display: block;
-        width: 30px;
-        height: 30px;
+        width: 32px;
+        height: 32px;
         transition: all var(--animation-time);
         // box-shadow: 0px 2px 4px 0px rgba(2,91,86,0.63);
         filter: drop-shadow(0px 2px 4px rgba(2, 91, 86, 0.4));
@@ -31,7 +31,7 @@
     .btnTietle {
         position: absolute;
         left: -20%;
-        bottom: -26%;
+        bottom: -25%;
         background: linear-gradient(180deg, #FF9941 0%, #FFC174 100%);
         border-radius: 6px;
         box-shadow: 0px 2px 4px 0px rgba(2, 91, 86, 0.4);

+ 3 - 3
src/page-instrument/custom-plugins/guide-driver/index.tsx

@@ -50,7 +50,7 @@ export const PractiseDriver = defineComponent({
     // 初始化部分引导位置
     const driverInitialPosition = (popover: PopoverDOM, options: { config: Config; state: State }) => {
       options.config.stageRadius = 5;
-      options.config.stagePadding = 8;
+      options.config.stagePadding = 4;
       try {
         const rect = options.state.activeElement?.getBoundingClientRect();
         popover.wrapper.style.marginLeft = -(rect?.width || 0) / 2 + 4 + "px";
@@ -498,7 +498,7 @@ export const FollowDriver = defineComponent({
     // 初始化部分引导位置
     const driverInitialPosition = (popover: PopoverDOM, options: { config: Config; state: State }) => {
       options.config.stageRadius = 5;
-      options.config.stagePadding = 8;
+      options.config.stagePadding = 4;
       try {
         const rect = options.state.activeElement?.getBoundingClientRect();
         popover.wrapper.style.marginLeft = -(rect?.width || 0) / 2 + 4 + "px";
@@ -703,7 +703,7 @@ export const EvaluatingDriver = defineComponent({
     // 初始化部分引导位置
     const driverInitialPosition = (popover: PopoverDOM, options: { config: Config; state: State }) => {
       options.config.stageRadius = 5;
-      options.config.stagePadding = 8;
+      options.config.stagePadding = 4;
       try {
         const rect = options.state.activeElement?.getBoundingClientRect();
         popover.wrapper.style.marginLeft = -(rect?.width || 0) / 2 + 4 + "px";

+ 5 - 5
src/page-instrument/custom-plugins/helper-model/recommendation/index.module.less

@@ -43,7 +43,7 @@
                     font-family: PingFangSC, PingFang SC;
                     font-weight: 500;
                     font-size: 13px;
-                    color: #B6C4D2;
+                    color: #aaaaaa;
                 }
             }
             .dropdownMenu{
@@ -151,8 +151,8 @@
                             margin-right: 0;
                         }
                         .van-uploader__preview-image{
-                            width: 56px;
-                            height: 56px;
+                            width: 54px;
+                            height: 54px;
                             border-radius: 6px;
                         }
                         .van-uploader__preview-delete--shadow{
@@ -174,8 +174,8 @@
                     }
                 }
                 .uploaderbox{
-                    width: 56px;
-                    height: 56px;
+                    width: 54px;
+                    height: 54px;
                     background: #FFFFFF;
                     border-radius: 6px;
                     border: 1px dashed #D9D9D9;

+ 8 - 0
src/page-instrument/evaluat-model/index.tsx

@@ -59,6 +59,7 @@ export default defineComponent({
       evaluatUpdateAudio: false,
       isSaveVideo: state.setting.camera && state.setting.saveToAlbum,
       shareMode: false,
+      isSkipDoing: false, // 跳转执行中
     });
     /**
      * 检测返回
@@ -321,6 +322,13 @@ export default defineComponent({
 
     /** 评测结果按钮处理 */
     const handleEvaluatResult = (type: "practise" | "tryagain" | "look" | "share" | "update" | "selfCancel") => {
+      if (evaluatModel.isSkipDoing) {
+        return;
+      }
+      evaluatModel.isSkipDoing = true;
+      setTimeout(() => {
+        evaluatModel.isSkipDoing = false;
+      }, 1000);
       if (type === "update") {
         if (state.isAppPlay) {
           evaluatModel.evaluatUpdateAudio = true;

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

@@ -328,8 +328,8 @@
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);
-        width: 38px;
-        height: 38px;
+        width: 38Px;
+        height: 38Px;
     }
 }
 

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

@@ -860,7 +860,7 @@ export default defineComponent({
                   </div>
                 </div>
                 {
-                  <Popup v-model:show={headData.speedShow} class="popup-custom van-scale center-closeBtn speedBoxClass_drag" transition="van-scale" teleport="body" style={speedInfo.styleDrag.value} overlay-style={{ background: "rgba(0, 0, 0, 0.3)" }}>
+                  <Popup v-model:show={headData.speedShow} class="popup-custom van-scale center-closeBtn speedBoxClass_drag" transition="van-scale" teleport="body" style={speedInfo.styleDrag.value} overlay-style={{ background: "rgba(0, 0, 0, 0.7)" }}>
                     <Speed />
                     {state.platform === IPlatform.PC && <Dragbom showGuide={!state.guideInfo?.teacherDrag} onGuideDone={handleGuide} />}
                   </Popup>
@@ -972,7 +972,7 @@ export default defineComponent({
           <img class={styles.iconBtn} src={headImg("icon_reset.png")} />
         </div>
 
-        <Popup v-model:show={headTopData.settingMode} class="popup-custom van-scale center-closeBtn settingBoxClass_drag" transition="van-scale" teleport="body" style={positionInfo.styleDrag.value} overlay-style={{ background: "rgba(0, 0, 0, 0.3)" }}>
+        <Popup v-model:show={headTopData.settingMode} class="popup-custom van-scale center-closeBtn settingBoxClass_drag" transition="van-scale" teleport="body" style={positionInfo.styleDrag.value} overlay-style={{ background: "rgba(0, 0, 0, 0.7)" }}>
           <Settting />
           {state.platform === IPlatform.PC && <Dragbom showGuide={!state.guideInfo?.teacherDrag} onGuideDone={handleGuide} />}
         </Popup>

+ 2 - 2
src/page-instrument/header-top/settting/index.module.less

@@ -8,7 +8,7 @@
             bottom: 0;
             left: 50%;
             transform: translateX(-50%);
-            width: 157px;
+            width: 137px;
             height: 32px;
         }        
         .closeImg{
@@ -261,7 +261,7 @@
                 display: flex;
                 justify-content: center;
                 align-items: center;
-                padding: 14px 0;
+                padding: 14px 0 0;
                 margin-right: 16px;
                 >img{
                     width: 118px;

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

@@ -142,7 +142,7 @@ export default defineComponent({
                             state.modeType === "evaluating" && 
                             <>                       
                                 {
-                                    !query.workRecord &&                                 
+                                    (!query.workRecord && !query.evaluatingRecord) &&                                 
                                     <div class={styles.cellBox}>
                                         <div class={styles.tit}>评测难度</div>
                                         <div class={styles.radioBox}>
@@ -311,7 +311,7 @@ export default defineComponent({
 					class="popup-custom van-scale center-closeBtn recommenBoxClass_drag"
 					transition="van-scale"
 					teleport="body"
-                    overlay-style={{background:'rgba(0, 0, 0, 0.3)'}}
+                    overlay-style={{background:'rgba(0, 0, 0, 0.7)'}}
                     style={positionInfo.styleDrag.value}
 				>
                     <Recommendation

+ 2 - 2
src/page-instrument/header-top/speed/index.tsx

@@ -115,7 +115,7 @@ export default defineComponent({
 				<div class={styles.content}>
 					<div class={styles.conBox}>
 						<div class={styles.tit}>速度</div>
-						<div class={[styles.spendCon, workData.trainingType === "PRACTICE" && styles.disableSpend]}>
+						<div class={[styles.spendCon, (workData.trainingType === "PRACTICE" || workData.trainingType === "EVALUATION") && styles.disableSpend]}>
 							<img src={headImg("cutImg.png")} class={[styles.btn]} onClick={minusSpeed} />
 							<div class={styles.sliderCon}>
 								<Slider class={styles.slider} max={270} min={speed.value < 45 ? speed.value : 45} v-model={speed.value}>
@@ -130,7 +130,7 @@ export default defineComponent({
 							</div>
 							<img src={headImg("addImg.png")} class={[styles.btn]} onClick={plusSpeed} />	
 						</div>
-						<div class={[styles.speedSel, workData.trainingType === "PRACTICE" && styles.disableSpend]}>
+						<div class={[styles.speedSel, (workData.trainingType === "PRACTICE" || workData.trainingType === "EVALUATION") && styles.disableSpend]}>
 							<div onClick={resetCurrentSpeed}>原速</div>
 							<div onClick={()=>{ speed.value = 70 }}>70</div>
 							<div onClick={()=>{ speed.value = 80 }}>80</div>

+ 7 - 4
src/page-instrument/view-evaluat-report/component/share-top/index.module.less

@@ -137,6 +137,7 @@
             font-size: 16px;
             line-height: 22px;
             color: #AAAAAA;
+            font-weight: 600;
         }
 
         .mLabel {
@@ -153,7 +154,9 @@
         .mScore,
         .mLabel {
             color: #000000;
-            font-weight: normal;
+        }
+        .mLabel{
+            font-weight: 600;
         }
     }
 }
@@ -311,7 +314,7 @@
 
                     .plyr__progress__buffer {
                         height: 4px;
-                        color: #fff;
+                        color: rgba(1,193,181,0.6);
                         background-color: #fff;
                         margin-top: -2px;
                     }
@@ -406,12 +409,12 @@
             .plyr__controls {
                 .plyr__controls__item.plyr__control {
                     .icon--pressed {
-                        background-size: 100% 100%;
+                        background-size: 100% 100% !important;
                         background: url("./image/pause2.png") no-repeat;
                     }
 
                     .icon--not-pressed {
-                        background-size: 100% 100%;
+                        background-size: 100% 100% !important;
                         background: url("./image/play2.png") no-repeat;
                     }
                 }

+ 6 - 6
src/page-instrument/view-evaluat-report/index.module.less

@@ -47,12 +47,12 @@
       pointer-events: none;
     }
 
-    .vf-stavenote {
-      path {
-        fill: #ADADAD;
-        stroke: #ADADAD;
-      }
-    }
+    // .vf-stavenote {
+    //   path {
+    //     fill: #ADADAD;
+    //     stroke: #ADADAD;
+    //   }
+    // }
   }
 
   .headHeight {

+ 13 - 2
src/state.ts

@@ -682,7 +682,7 @@ const dynamicShowPlaySpeed = (index: number) => {
 
 // 开始播放时,计算mp3的播放倍率
 export const initSetPlayRate = () => {
-  const item: any = (state.sectionStatus && state.section.length === 2) ? state.sectionFirst || state.section[0] : state.times[state.activeNoteIndex];
+  const item: any = (state.sectionStatus && state.section.length === 2) ? state.section[0] : state.times[state.activeNoteIndex];
   if (item && item.measureSpeed) {
     const ratio = state.speed / Math.floor(item.measureSpeed)
     // state.audiosInstance?.setSpeed(ratio)
@@ -694,7 +694,11 @@ export const initSetPlayRate = () => {
 // 重置播放倍率
 export const resetBaseRate = (idx?: number) => {
   const index = idx ? idx : 0;
-  const currentItem: any = state.times[index];
+  let currentItem: any = state.times[index];
+  // 如果是在预备小节点击原速,需要重置为选段第一小节的速度
+  if (state.section.length === 2 && state.sectionFirst && state.sectionFirst.MeasureNumberXML === currentItem.MeasureNumberXML) {
+    currentItem = state.section[0];
+  }
   const currentSpeed = currentItem?.measureSpeed ? currentItem.measureSpeed : state.originSpeed;
   console.log('速度2',currentSpeed)
   state.speed = currentSpeed
@@ -1198,6 +1202,10 @@ export const resetSettings = () => {
   if (state.isAppPlay) {
     audioData.progress = 0;
   }
+  showToast({
+    message: "已将所有参数重置到默认状态",
+    position: "top",
+  });
 };
 
 /** 效验并格式化选段小节 */
@@ -2143,6 +2151,9 @@ watch(
         if(measureNum > rightMeasureNumberXML){
           item.querySelector('.vf-custom-bg')?.setAttribute("fill", "transparent")
         }
+        if (measureNum >= leftMeasureNumberXML && measureNum <= rightMeasureNumberXML) {
+          item.querySelector('.vf-custom-bg')?.setAttribute("fill", "rgba(1, 193, 181, 0.15)")
+        }
         // 预备小节
         if(state.sectionFirst && measureNum === state.sectionFirst.MeasureNumberXML){
           item?.querySelector('.vf-custom-bg')?.setAttribute("fill", "rgba(255, 193, 48, 0.15)")

+ 6 - 5
src/view/abnormal-pop/index.module.less

@@ -47,6 +47,7 @@
     }
     .content {
         .title {
+            line-height: 24px;
             font-size: 18px;
             font-family: PingFangSC, PingFang SC;
             font-weight: 600;
@@ -63,7 +64,7 @@
         }
     }
     .btn {
-        width: 97px;
+        width: 104px;
         height: 32px;
         &:active{
             opacity: 0.8;
@@ -106,14 +107,14 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    transform: translateY(-14px);
     .loadingIcon {
         width: 118px;
     }
     .loadingTip {
         font-size: 16px;
         color: #fff;
-        margin: 8px 0 18px;
+        line-height: 20px;
+        margin-bottom: 24px;
     }
     .loadingClose {
         font-weight: 400;
@@ -123,7 +124,7 @@
         border: 1px solid rgba(255, 255, 255, 0.7);
         border-radius: 16px;
         text-align: center;
-        width: 97px;
+        width: 104px;
         height: 32px;
         box-sizing: border-box;
         &:active{
@@ -139,7 +140,7 @@
     justify-content: space-between;
     flex-wrap: wrap;
     align-content: space-between;
-    margin-bottom: 24px;
+    margin-bottom: 17px;
     animation: rotate 1.5s ease-in-out infinite;
     .loadingCssItem{
         width: 11px;

+ 12 - 8
src/view/music-score/index.tsx

@@ -85,7 +85,7 @@ export default defineComponent({
 			const container = document.getElementById("musicAndSelection");
 			if (!container || !musicData.score) return;
 			setGlobalMusicSheet();
-			if(!osmd){
+			//if(!osmd){
 				osmd = new OpenSheetMusicDisplay(container, {
 					drawTitle: false,
 					drawSubtitle: false,
@@ -104,14 +104,18 @@ export default defineComponent({
 					// ...this.opotions,
 					colorStemsLikeNoteheads: true, // 是否将音符柄的颜色设置为与它们的音符头相同,默认false
 					// drawingParameters: "compact" // 使用紧凑布局
+					drawLyrics: (((!state.accompany && !state.music ) || state.playType === 'sing' || !state.isEvxml) && !state.isSimplePage) ? true : false, // 演唱模式才渲染歌词,simple页面不显示歌词
+					drawPartNames: props.showPartNames, // 是否渲染声轨名称
+					defaultColorMusic: props.musicColor, // 颜色
+					renderSingleHorizontalStaffline: state.isSingleLine ? true : false
 				});
-			}
-			osmd.setOptions({
-				drawLyrics: (((!state.accompany && !state.music ) || state.playType === 'sing' || !state.isEvxml) && !state.isSimplePage) ? true : false, // 演唱模式才渲染歌词,simple页面不显示歌词
-				drawPartNames: props.showPartNames, // 是否渲染声轨名称
-				defaultColorMusic: props.musicColor, // 颜色
-				renderSingleHorizontalStaffline: state.isSingleLine ? true : false
-			})
+			//}
+			// osmd.setOptions({
+			// 	drawLyrics: (((!state.accompany && !state.music ) || state.playType === 'sing' || !state.isEvxml) && !state.isSimplePage) ? true : false, // 演唱模式才渲染歌词,simple页面不显示歌词
+			// 	drawPartNames: props.showPartNames, // 是否渲染声轨名称
+			// 	defaultColorMusic: props.musicColor, // 颜色
+			// 	renderSingleHorizontalStaffline: state.isSingleLine ? true : false
+			// })
 			// osmd.EngravingRules.CompactMode = true // 紧凑模式
 			// osmd.EngravingRules.PageRightMargin = state.isSingleLine ? (window.innerWidth+200)/10 : 2;
 			// osmd.EngravingRules.FixedMeasureWidth = state.isSingleLine ? true : false; // 是否固定小节的宽度(小节同一宽度渲染)

TEMPAT SAMPAH
src/view/plugins/toggleMusicSheet/choosePartName/imgs/cancelBtn.png


TEMPAT SAMPAH
src/view/plugins/toggleMusicSheet/choosePartName/imgs/okBtn.png


+ 1 - 1
src/view/plugins/toggleMusicSheet/choosePartName/index.module.less

@@ -107,7 +107,7 @@
       justify-content: center;
       .btn{
         width: 118px;
-        height: 40px;
+        height: 39px;
         cursor: pointer;
         &:active,&:hover{
           opacity: 0.8;

+ 25 - 13
src/view/plugins/toggleMusicSheet/choosePartName/index.tsx

@@ -39,20 +39,29 @@ export default defineComponent({
         if(selValues.value[0] === 999){
           selValues.value = []
         }
-        const index = selValues.value.indexOf(value)
-        if(index > -1){
-          if(selValues.value.length > 1){
-            selValues.value.splice(index, 1)
-          }
-        }else{
-          if(selValues.value.length >=4){
-            showToast({
-              position: "top",
-              message: "最多可选4个"
-            });
+        if (state.modeType !== 'practise') {
+          if (value == selValues.value[0]) {
             return
+          } else {
+            selValues.value = []
+            selValues.value.push(value)
+          }
+        } else {
+          const index = selValues.value.indexOf(value)
+          if(index > -1){
+            if(selValues.value.length > 1){
+              selValues.value.splice(index, 1)
+            }
+          }else{
+            if(selValues.value.length >=4){
+              showToast({
+                position: "top",
+                message: "最多可选4个"
+              });
+              return
+            }
+            selValues.value.push(value)
           }
-          selValues.value.push(value)
         }
       }
     }
@@ -77,7 +86,10 @@ export default defineComponent({
             }
             <div class={styles.titCon}>
               <div class={styles.tit}>选择声部</div>
-              <div class={styles.tips}>(最多可选4个)</div>
+              {
+                state.modeType === 'practise' && 
+                <div class={styles.tips}>(最多可选4个)</div>
+              }
             </div>
             <div class={[styles.content, styles.sheetCon]}>
               <div class={styles.boxCon}>

+ 1 - 1
src/view/plugins/toggleMusicSheet/index.tsx

@@ -98,7 +98,7 @@ export default defineComponent({
 
 
     return () => (
-      <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)'}}>
+      <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.7)'}}>
         <ChoosePartName
           partIndexs={partIndexs.value}
           partListNames={partListNames.value}

TEMPAT SAMPAH
src/view/selection/imgs/pitchHigh.png


TEMPAT SAMPAH
src/view/selection/imgs/pitchLow.png