fix

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

@@ -0,0 +1,75 @@
+.fixedBtn {
+    position: fixed;
+    top: 50%;
+    right: 0;
+    transform: translateY(-50%);
+    width: 22px;
+    height: 42px;
+    background: rgba(0, 0, 0, 0.24);
+    border-radius: 9px 0px 0px 9px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &:active {
+        opacity: .8;
+    }
+
+    &>img {
+        width: 12px;
+        height: 14px;
+    }
+}
+
+.tabs {
+    height: 100vh;
+    width: 50vw;
+
+    :global {
+        .van-tabs {
+            height: 100%;
+        }
+
+        .van-tabs__wrap {
+            height: 44px;
+            --van-tab-text-color: #777;
+
+            .van-tab {
+                z-index: 2;
+            }
+        }
+
+        .van-tabs__content {
+            height: calc(100% - 44px);
+            overflow: hidden;
+        }
+
+        .van-tab__panel {
+            height: 100%;
+            overflow-x: hidden;
+            overflow-y: auto;
+        }
+    }
+}
+
+.wrap {
+    padding: 4px 12px;
+}
+
+.item {
+    display: flex;
+    align-items: center;
+    height: 41px;
+    border-radius: 7px;
+    font-size: 13px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #333333;
+    line-height: 18px;
+    padding: 0 14px;
+    margin: 10px 0;
+}
+
+.itemActive {
+    background: #ECF9FF;
+}

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

@@ -0,0 +1,31 @@
+import { defineComponent, reactive } from "vue";
+import styles from "./index.module.less";
+import icon_menu from "./icon_menu.png";
+import { Popup, Tab, Tabs } from "vant";
+import List from "./list";
+
+export default defineComponent({
+	name: "TheMusicList",
+	setup() {
+		const data = reactive({
+			show: false,
+		});
+		return () => (
+			<>
+				<div class={styles.fixedBtn} onClick={() => (data.show = true)}>
+					<img src={icon_menu} />
+				</div>
+				<Popup position="right" v-model:show={data.show} round>
+					<div class={styles.tabs}>
+						<Tabs>
+							<Tab title="其他曲谱">
+                                <List />
+                            </Tab>
+							<Tab title="最近练习">内容 2</Tab>
+						</Tabs>
+					</div>
+				</Popup>
+			</>
+		);
+	},
+});

src/page-instrument/component/the-music-list/list.tsx

@@ -0,0 +1,14 @@
+import { defineComponent } from "vue";
+import styles from "./index.module.less";
+
+export default defineComponent({
+	name: "TheMusicList-list",
+	setup() {
+		return () => (
+			<div class={styles.wrap}>
+				<div class={[styles.item, styles.itemActive]}>请放开我的手</div>
+				<div class={[styles.item, styles.itemActive]}>请放开我的手</div>
+			</div>
+		);
+	},
+});

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

@@ -45,6 +45,7 @@ import FollowPractice from "/src/view/follow-practice";
 import FollowModel from "../follow-model";
 import RecordingTime from "../custom-plugins/recording-time";
 import WorkIndex from "../custom-plugins/work-index";
+import TheMusicList from "../component/the-music-list";
 
 export default defineComponent({
 	name: "music-list",
@@ -344,12 +345,12 @@ export default defineComponent({
 
 				{state.musicRendered && (
 					<>
-						{/* 选段设置速度 */}
-						<MeasureSpeed />
 						{/* 统计训练时长 */}
 						<RecordingTime />
 						{/* 作业 */}
 						{query.workRecord && <WorkIndex pageShow={detailData.pageShow} />}
+						{/* 曲谱列表 */}
+						{/* <TheMusicList /> */}
 					</>
 				)}
 			</div>