选段

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

@@ -25,9 +25,6 @@
     #cursorImg-0 {
         display: none;
     }
-    // .staveBox {
-    //     display: none !important;
-    // }
     .authorName{
         position: fixed;
         left: 0;

src/state.ts

@@ -1128,7 +1128,7 @@ export const hanldeDirectSelection = (list: any[]) => {
   setTimeout(() => {
     state.section = formateSelectMearure(list);
     console.log('选段小节', state.section)
-  }, 500);
+  }, 0);
 };
 let offsetTop = 0;
 /**

src/view/selection/index.module.less

@@ -16,79 +16,14 @@
     // background: rgba(0,0,0,0.3);
 }
 
-
-.staveBox {
-    background-color: var(--active-stave-box) !important;
-}
-
-.leftStaveBox {
-    background-color: var(--active-stave-box);
-
-    &::before {
-        content: '';
-        position: absolute;
-        left: -5px;
-        top: -5px;
-        width: 5px;
-        height: 100%;
-        border-top: 5px solid var(--van-primary-color);
-        border-left: 5px solid var(--van-primary-color);
-        border-bottom: 5px solid var(--van-primary-color);
-    }
-}
-
-.rightStaveBox {
-    background-color: var(--active-stave-box);
-
-    &::after {
-        content: '';
-        position: absolute;
-        right: -5px;
-        top: -5px;
-        width: 5px;
-        height: 100%;
-        border-top: 5px solid var(--van-primary-color);
-        border-right: 5px solid var(--van-primary-color);
-        border-bottom: 5px solid var(--van-primary-color);
-    }
-}
-
-.centerStaveBox {
-    background-color: var(--active-stave-box);
-
-    &::before {
-        content: '';
-        position: absolute;
-        left: -5px;
-        top: -5px;
-        width: 5px;
-        height: 100%;
-        border-top: 5px solid var(--van-primary-color);
-        border-left: 5px solid var(--van-primary-color);
-        border-bottom: 5px solid var(--van-primary-color);
-    }
-
-    &::after {
-        content: '';
-        position: absolute;
-        right: -5px;
-        top: -5px;
-        width: 5px;
-        height: 100%;
-        border-top: 5px solid var(--van-primary-color);
-        border-right: 5px solid var(--van-primary-color);
-        border-bottom: 5px solid var(--van-primary-color);
-    }
-}
-
 .prepareStaveBox {
-    background-color: rgba(255, 98, 37, 0.18);
+    background-color: rgba(113,184,189, 0.7);
 }
 
 .selectBox{
     position: absolute;
     width: 3Px;
-    background-color: #FFC121;
+    background-color: #FFB800;
     z-index: 9;
     .selectHandle{
         position: absolute;
@@ -108,6 +43,10 @@
             background-position: 3Px 3Px;
             border-radius: 0 100Px 100Px 0;
         }
+        &.playIng{
+            pointer-events: none;
+            background-image:none; 
+        }
     }
 }
 

src/view/selection/index.tsx

@@ -1,4 +1,4 @@
-import { computed, defineComponent, onMounted, reactive, Transition, nextTick } from "vue";
+import { computed, defineComponent, onMounted, reactive, Transition, nextTick, watch } from "vue";
 import state, { EnumMusicRenderType, handleSelection, skipNotePlay, IPlatform } from "/src/state";
 import styles from "./index.module.less";
 import { metronomeData } from "/src/helpers/metronome";
@@ -176,46 +176,12 @@ export default defineComponent({
 		const showClass = computed(() => {
 			return (item: any) => {
 				if (state.sectionStatus) {
-					if (state.section.length === 1) {
-						if (item.MeasureNumberXML == state.section[0].MeasureNumberXML) {
-							return styles.leftStaveBox;
-						}
-					}
 					if (state.section.length === 2) {
-						// 实际的结束位置
-						const actualEndIndex = state.userChooseEndIndex > state.section[1].MeasureNumberXML ? state.userChooseEndIndex : state.section[1].MeasureNumberXML
 						// 选段预备拍背景
 						if (state.sectionFirst && item.MeasureNumberXML === state.sectionFirst.MeasureNumberXML) {
 							item.staveBox.height = selectData.measureHeight + 'px';
 							return styles.prepareStaveBox;
 						}
-						if (
-							item.MeasureNumberXML >= state.section[0].MeasureNumberXML &&
-							item.MeasureNumberXML <= actualEndIndex
-						) {
-							if (
-								item.MeasureNumberXML == state.section[0].MeasureNumberXML &&
-								item.MeasureNumberXML == actualEndIndex
-							) {
-								return styles.centerStaveBox;
-							}
-							if (item.MeasureNumberXML == state.section[0].MeasureNumberXML) {
-								return styles.leftStaveBox;
-							}
-							if (item.MeasureNumberXML == actualEndIndex) {
-								if (!item.staveBox?.height) {
-									item.staveBox.height = selectData.measureHeight + 'px'
-								}
-								return styles.rightStaveBox;
-							}
-							return "";
-						}
-					}
-				} else {
-					if (state.activeMeasureIndex == item.MeasureNumberXML && !state.isReport) {
-						// console.log('当前的小节',state.activeMeasureIndex,item.MeasureNumberXML)
-						item.staveBox.height = selectData.measureHeight + 'px';
-						return "";
 					}
 				}
 			};
@@ -231,9 +197,10 @@ export default defineComponent({
 						return currItem && {
 							left: currItem.staveBox.left,
 							top: currItem.staveBox.top,
-							height: selectData.measureHeight + 'px'
+							height: selectData.measureHeight + 'px'  // 小节的高度
 						}
 					} else {
+						// 实际的结束位置
 						const actualEndIndex = state.userChooseEndIndex > item.MeasureNumberXML ? state.userChooseEndIndex : item.MeasureNumberXML
 						const currItem = selectData.staves.find(stave => {
 							return stave.MeasureNumberXML === actualEndIndex
@@ -353,8 +320,10 @@ export default defineComponent({
 				{
 					sectionPosData.value.map((item,index) =>{
 						return (
-							<div class={styles.selectBox} style={item}>
-								<div class={[styles.selectHandle,index>0&&styles.selectHandleRight]}></div>
+							item && <div class={styles.selectBox} style={item}>
+								<div class={[styles.selectHandle,index>0&&styles.selectHandleRight,state.playState==="play"&&styles.playIng]} onClick={()=>{
+									state.section.splice(index,1)
+								}}></div>
 							</div>
 						)
 					})

vite.config.ts

@@ -78,7 +78,7 @@ export default defineConfig({
         // target: "https://kt.colexiu.com",
         target: "https://test.resource.colexiu.com", // 内容平台开发环境，内容平台开发，需在url链接上加上isCbs=true
         //target: "https://dev.resource.colexiu.com",
-        // target: "https://dev.kt.colexiu.com",
+        //target: "https://dev.kt.colexiu.com",
         //target: "https://mec.colexiu.com",
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/instrument/, ""),