更新

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

@@ -284,6 +284,10 @@
                     color: #616161;
                     line-height: 16px;
                     padding: 7px 6px;
+                    height: 46px;
+                }
+                .backBtn{
+                    line-height: 32px;
                 }
             }
             .optionBtns{
@@ -362,32 +366,6 @@
                             color: #616161;
                             line-height: 20px;
                         }
-                        &.btnGrToggleBtn{
-                            font-weight: 500;
-                            font-size: 14px;
-                            color: #616161;
-                            >div{
-                                display: flex;
-                                flex-direction: column;
-                                align-items: center;
-                                &.nameBox{
-                                    flex-direction: initial;
-                                    .dot {
-                                        display: inline-block;
-                                        position: absolute;
-                                        top: 0;
-                                    }
-                                }
-                            }
-                            .name{
-                                display: flex;
-                            }
-                            .arrowImg{
-                                margin-top: 2px;
-                                width: 9px;
-                                height: 5px;
-                            }
-                        }
                     }
                 }
             }
@@ -576,7 +554,44 @@
 
     }
 }
-
+.btnGrToggleBtn{
+    font-weight: 600;
+    font-size: 12px;
+    color: #fff;
+    >div{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        z-index: 10;
+        &.nameBox{
+            padding-top: 2px;
+            .name{
+                font-size: 10px;
+            }
+            .noteKey{
+                font-size: 12px;
+                position: relative;
+            }
+            .dot {
+                display: inline-block;
+                position: absolute;
+                top: 0px;
+                &.botDot{
+                    top: initial;
+                    bottom: -2px;
+                }
+            }
+        }
+    }
+    .name{
+        display: flex;
+    }
+    .arrowImg{
+        margin-top: 2px;
+        width: 9px;
+        height: 5px;
+    }
+}
 .notes {
     position: relative;
     display: flex;

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

@@ -14,6 +14,7 @@ import { browser } from "/src/utils";
 import { usePageVisibility } from "@vant/use";
 import { watch } from "vue";
 import icon_loading_img from "./image/icon_loading_img.png";
+import noteImg from "./image/noteImg.png";
 import state, { IPlatform } from "/src/state";
 import { api_musicalInstrumentList, api_subjectList, getSubjectList } from "../api";
 import ChangeSubject from "./change-subject";
@@ -1142,6 +1143,9 @@ export default defineComponent({
                                       {playAction.userAnswerStatus === 1 && <div class={[styles.tipsT, styles.playSuccess]}></div>}
                                       {playAction.userAnswerStatus === 2 && <div class={[styles.tipsT, styles.playError]}></div>}
                                       {playAction.resetAction && <div class={[styles.tipsT, styles.playTips5]}></div>}
+                                      <div class={[styles.backBtn,styles.changeMusBtn]} onClick={() => handleBack()}>
+                                          <span>返回</span>
+                                      </div>
                                       <div class={styles.changeMusBtn} onClick={onChangeFingeringModel}>
                                           <span>{modeText.value.text}</span>
                                       </div>
@@ -1168,6 +1172,39 @@ export default defineComponent({
                                             <img draggable={false} src={data.noteType === "all" ? icons.icon_btn_orange : icons.icon_btn_orange2} />
                                           </div>
                                         )}
+                                        {!!data.tones.length && data.fingeringMode === "scaleMode" && (
+                                          <>
+                                            {fingerData.fingeringInfo.name == "hulusi-flute" ? (
+                                              <div id="finger-note-1" class={[styles.note,styles.btnGrToggleBtn]} onClick={() => (data.tnoteShow = true)}>
+                                                <img draggable={false} src={noteImg} />
+                                                <div class={styles.nameBox}>
+                                                  <div class={styles.name}>全按作</div>
+                                                  <div class={[styles.noteKey, styles.noteKeyBtn]}>
+                                                    {data.activeTone.step > 0 ? <span class={styles.dot}></span> : null}
+                                                    <div class={styles.noteName}>
+                                                      <sup>{data.activeTone.mark && (data.activeTone.mark === "rise" ? "#" : "b")}</sup>
+                                                      {data.activeTone.key}
+                                                    </div>
+                                                    {data.activeTone.step < 0 ? <span class={[styles.dot,styles.botDot]}></span> : null}
+                                                  </div>
+                                                </div>
+                                              </div>
+                                            ) : (
+                                              <div id="finger-note-1" class={[styles.note,styles.btnGrToggleBtn]} onClick={() => (data.tnoteShow = true)}>
+                                                <img draggable={false} src={noteImg} />
+                                                <div>
+                                                  <div class={styles.name}>
+                                                    <div>
+                                                      <sup>{data.activeTone.mark && (data.activeTone.mark === "rise" ? "#" : "b")}</sup>
+                                                      {data.activeTone.name}
+                                                    </div>
+                                                    调
+                                                  </div>
+                                                </div>
+                                              </div>
+                                            )}
+                                          </>
+                                        )}
                                         {/* [styles.noteContent, browsInfo.ios ? "" : styles.noteContentWrap, data.huaweiPad && styles.huaweiPad] */}
                                         <div class={styles.lastNoteContent}>
                                           <div ref={noteBoxRef} class={styles.noteBox}>
@@ -1320,41 +1357,6 @@ export default defineComponent({
                                             <img src={icons.icon_2_1} />
                                             <span>说明</span>
                                           </div>
-                                          {!!data.tones.length && data.fingeringMode === "scaleMode" && (
-                                              <>
-                                                {fingerData.fingeringInfo.name == "hulusi-flute" ? (
-                                                  <div id="finger-note-1" class={[styles.btnGr, styles.btnGrToggleBtn]} onClick={() => (data.tnoteShow = true)}>
-                                                    <div class={styles.nameBox}>
-                                                      全按作
-                                                      <div class={[styles.noteKey, styles.noteKeyBtn]}>
-                                                        {data.activeTone.step > 0 ? <span class={styles.dot}></span> : null}
-                                                        <span class={styles.dot}></span>
-
-                                                        <div class={styles.noteName}>
-                                                          <sup>{data.activeTone.mark && (data.activeTone.mark === "rise" ? "#" : "b")}</sup>
-                                                          {data.activeTone.key}
-                                                        </div>
-                                                        {data.activeTone.step < 0 ? <span class={styles.dot}></span> : null}
-                                                      </div>
-                                                    </div>
-                                                    <img class={styles.arrowImg} src={icons.icon_arrow} />
-                                                  </div>
-                                                ) : (
-                                                  <div id="finger-note-1" class={[styles.btnGr, styles.btnGrToggleBtn]} onClick={() => (data.tnoteShow = true)}>
-                                                    <div>
-                                                      <div class={styles.name}>
-                                                        <div>
-                                                          <sup>{data.activeTone.mark && (data.activeTone.mark === "rise" ? "#" : "b")}</sup>
-                                                          {data.activeTone.name}
-                                                        </div>
-                                                        调
-                                                      </div>
-                                                      <img class={styles.arrowImg} src={icons.icon_arrow} />
-                                                    </div>
-                                                  </div>
-                                                )}
-                                              </>
-                                          )}
                                           {
                                             instrumentTranstion.value &&
                                             <div class={[styles.btnGr]} onClick={() => resetElement()}>