分段样式

src/view/selection/index.module.less

@@ -85,6 +85,32 @@
     background-color: rgba(255, 98, 37, 0.18);
 }
 
+.selectBox{
+    position: absolute;
+    width: 3Px;
+    background-color: #FFC121;
+    z-index: 9;
+    .selectHandle{
+        position: absolute;
+        top: -22Px;
+        right: 0;
+        width: 22Px;
+        height: 22Px;
+        cursor: pointer;
+        background-color: #FFB800;
+        background-image: url("./imgs/close.png");
+        background-repeat: no-repeat;
+        background-size: 15Px 15Px;
+        background-position: 4Px 3Px;
+        border-radius: 100Px 0 0 100Px;
+        &.selectHandleRight{
+            right: -19Px;
+            background-position: 3Px 3Px;
+            border-radius: 0 100Px 100Px 0;
+        }
+    }
+}
+
 .disable {
     pointer-events: none;
 }

src/view/selection/index.tsx

@@ -219,6 +219,34 @@ export default defineComponent({
 				}
 			};
 		});
+		// 选段符号
+		const sectionPosData = computed(() => {
+			if(state.sectionStatus) {
+				return state.section.map(((item,index) => {
+					if(index === 0){
+						const currItem = selectData.staves.find(stave => {
+							return stave.MeasureNumberXML === item.MeasureNumberXML	
+						})
+						return currItem && {
+							left: currItem.staveBox.left,
+							top: currItem.staveBox.top,
+							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
+						})
+						return currItem && {
+							left: parseFloat(currItem.staveBox.left)+parseFloat(currItem.staveBox.width)+"px",
+							top: currItem.staveBox.top,
+							height: selectData.measureHeight + 'px'
+						}
+					}
+				}))
+			}
+			return []
+		})
 		onMounted(() => {
 			calcNoteData();
 			// 初始化谱面可移动的元素位置
@@ -320,7 +348,16 @@ export default defineComponent({
 						</div>
 					);
 				})}
-
+				{/* 选段 */}
+				{
+					sectionPosData.value.map((item,index) =>{
+						return (
+							<div class={styles.selectBox} style={item}>
+								<div class={[styles.selectHandle,index>0&&styles.selectHandleRight]}></div>
+							</div>
+						)
+					})
+				}
 				{/* 移动模块 */}
 				{query.isMove == "1" && <MoveMusicScore />}
 			</div>