葫芦丝

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

@@ -312,15 +312,16 @@
 
     }
 
-    .noteBtn{
+    .noteBtn {
         background: transparent;
         color: rgba(69, 143, 177, .32);
         pointer-events: none;
         border: 0;
         padding: 0;
         font-size: 22px;
-        :global{
-            .van-icon{
+
+        :global {
+            .van-icon {
                 font-weight: bold;
             }
         }
@@ -348,41 +349,43 @@
         height: 100%;
     }
 
-    .noteKey {
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-evenly;
-        align-items: center;
-        z-index: 1;
-        font-size: 16px;
-        font-family: 'jianzhu';
-        font-weight: normal;
-        color: #FFFFFF;
-        text-shadow: 0px 1px 3px #1EADF1;
-        line-height: 1;
-        height: 100%;
 
-        &.keyActive {
-            text-shadow: 0px 1px 3px #F6A81B;
-        }
+}
 
-        .dot {
-            width: 3px;
-            height: 3px;
-            border-radius: 50%;
-            background-color: #fff;
-        }
+.noteKey {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: center;
+    z-index: 1;
+    font-size: 16px;
+    font-family: 'jianzhu';
+    font-weight: normal;
+    color: #FFFFFF;
+    text-shadow: 0px 1px 3px #1EADF1;
+    line-height: 1;
+    height: 100%;
 
-        .noteName {
-            position: relative;
-        }
+    &.keyActive {
+        text-shadow: 0px 1px 3px #F6A81B;
+    }
 
-        .mark {
-            position: absolute;
-            left: -80%;
-            font-size: 12px;
-        }
+    .dot {
+        width: 3px;
+        height: 3px;
+        border-radius: 50%;
+        background-color: #fff;
+    }
+
+    .noteName {
+        position: relative;
+    }
+
+    .mark {
+        position: absolute;
+        left: -80%;
+        font-size: 12px;
     }
 }
 
@@ -479,6 +482,19 @@
     }
 }
 
+.toggleBtnhulusi {
+    height: auto;
+    padding: 10px 0 10px 10px;
+    .hulusiNoteKey{
+        color: #A14927;
+        text-shadow: none;
+        .dot{
+            background: #A14927;
+        }
+    }
+    
+}
+
 .tones {
     display: flex;
     flex-direction: column;
@@ -591,6 +607,18 @@
                 }
             }
         }
+        :global(.van-button--primary){
+            .dot{
+                background: var(--van-primary-color) !important;
+            }
+        }
+        .hulusiNoteKey{
+            color: inherit;
+            text-shadow: none;
+            .dot{
+                background: #323233;
+            }
+        }
     }
 }
 

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

@@ -337,7 +337,27 @@ export default defineComponent({
 							</div>
 						</div>
 					</div>
-					{!!data.tones.length && (
+					{!!data.tones.length && fingerData.fingeringInfo.name == "hulusi-flute" ? (
+						<div
+							id="finger-note-1"
+							class={[styles.toggleBtn, styles.toggleBtnhulusi]}
+							onClick={() => (data.tnoteShow = true)}
+						>
+							<div>
+								全按作
+								<div class={[styles.noteKey, styles.hulusiNoteKey]}>
+									{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}></span> : null}
+								</div>
+							</div>
+							<img src={icons.icon_arrow} />
+						</div>
+					) : (
 						<div id="finger-note-1" class={styles.toggleBtn} onClick={() => (data.tnoteShow = true)}>
 							<div>
 								<sup>{data.activeTone.mark && (data.activeTone.mark === "rise" ? "#" : "b")}</sup>
@@ -374,13 +394,26 @@ export default defineComponent({
 													setNotes();
 												}}
 											>
-												{/* {tone.step > 0 ? steps.map((n) => <span class={styles.dot}></span>) : null} */}
-
-												<div class={styles.noteName}>
-													<sup>{tone.mark && (tone.mark === "rise" ? "#" : "b")}</sup>
-													{tone.name}
-												</div>
-												{/* {tone.step < 0 ? steps.map((n) => <span class={styles.dot}></span>) : null} */}
+												{fingerData.fingeringInfo.name == "hulusi-flute" ? (
+													<div style={{ display: "flex", alignItems: 'center' }}>
+														全按作
+														<div class={[styles.noteKey, styles.hulusiNoteKey]}>
+															{tone.step > 0 ? <span class={styles.dot}></span> : null}
+															<div class={styles.noteName}>
+																<sup>
+																	{tone.mark && (tone.mark === "rise" ? "#" : "b")}
+																</sup>
+																{tone.key}
+															</div>
+															{tone.step < 0 ? <span class={styles.dot}></span> : null}
+														</div>
+													</div>
+												) : (
+													<div class={styles.noteName}>
+														<sup>{tone.mark && (tone.mark === "rise" ? "#" : "b")}</sup>
+														{tone.name}
+													</div>
+												)}
 											</Button>
 										);
 									})}