修改样式

src/page-instrument/view-figner/guide/finger-guide.tsx

@@ -6,102 +6,105 @@ import state from "/src/state";
 import { getQuery } from "/src/utils/queryString";
 
 export default defineComponent({
-	name: "DetailGuide",
-	emits: ["close"],
-	setup(props, { emit }) {
-		const query = getQuery();
-		const data = reactive({
-			box: {},
-			show: true,
-			steps: [
-				{
-					className: "boxItem1",
-					des: `快点击下排按钮听听${state.fingeringInfo.code}的声音吧，按钮可以滑动哦～`,
-					img: icons.icon_cursor_1,
-				},
-				{
-					className: "boxItem2",
-					des: "这里可以切换音调，查看不同音调的指法～",
-					img: icons.icon_cursor_2,
-				},
-				{
-					className: "boxItem3",
-					des: "可以通过手势放大缩小乐器哦～",
-					img: icons.icon_cursor_3,
-				},
-			],
-			step: 0,
-		});
-		const steps = ["finger-note-0", "finger-note-1", "finger-note-2"];
-		const getStepELe = () => {
-			const ele: HTMLElement = document.getElementById(steps[data.step])!;
-			console.log(data.step, ele);
-			if (ele) {
-				const eleRect = ele.getBoundingClientRect();
-				const increment = data.step === 2 ? eleRect.width : 0;
-				data.box = {
-					left: eleRect.x - increment + "px",
-					top: eleRect.y + "px",
-					width: (data.step === 2 ? 0 : eleRect.width) + "px",
-					height: (data.step === 2 ? 0 : eleRect.height) + "px",
-				};
-			} else {
-				handleNext();
-			}
-		};
-		onMounted(() => {
-			getStepELe();
-		});
+  name: "DetailGuide",
+  props: {
+    fingeringMode: {
+      type: String,
+      default: "",
+    },
+  },
+  emits: ["close"],
+  setup(props, { emit }) {
+    const query = getQuery();
+    const data = reactive({
+      box: {},
+      show: true,
+      steps: [
+        {
+          className: "boxItem1",
+          classTip: "",
+          des: `快点击下排按钮听听${state.fingeringInfo.code}的声音吧，按钮可以滑动哦～`,
+          img: icons.icon_cursor_1,
+        },
+        {
+          className: "boxItem2",
+          classTip: "boxTip2",
+          des: "这里可以切换音调，查看不同音调的指法～",
+          img: icons.icon_cursor_2,
+        },
+        {
+          className: "boxItem3",
+          classTip: "boxTip3",
+          des: "可以通过手势放大缩小乐器哦～",
+          img: icons.icon_cursor_3,
+        },
+      ],
+      step: 0,
+    });
+    const steps = ["finger-note-0", "finger-note-1", "finger-note-2"];
+    const getStepELe = () => {
+      const ele: HTMLElement = document.getElementById(steps[data.step])!;
+      console.log(data.step, ele);
+      if (ele) {
+        const eleRect = ele.getBoundingClientRect();
+        const increment = data.step === 2 ? eleRect.width : 0;
+        data.box = {
+          left: eleRect.x - increment + "px",
+          top: eleRect.y + "px",
+          width: (data.step === 2 ? 0 : eleRect.width) + "px",
+          height: (data.step === 2 ? 0 : eleRect.height) + "px",
+        };
+      } else {
+        handleNext();
+      }
+    };
+    onMounted(() => {
+      getStepELe();
+    });
 
-		const handleNext = () => {
-			if (data.step >= 2) {
-				endGuide();
-				return;
-			}
-			data.step = data.step + 1;
-			getStepELe();
-		};
+    const handleNext = () => {
+      if (data.step >= 2) {
+        endGuide();
+        return;
+      }
+      data.step = data.step + 1;
+      getStepELe();
+    };
 
-		const endGuide = () => {
-			emit("close", true);
-		};
-		return () => (
-			<Popup
-				zIndex={5051}
-				teleport="body"
-				overlay={false}
-				closeOnClickOverlay={false}
-				class={["popup-custom", styles.fingerGuide]}
-				v-model:show={data.show}
-			>
-				<div class={styles.content} onClick={() => handleNext()}>
-					<div class={styles.box} style={data.box}>
-						{data.steps.map((item, index) => (
-							<div style={{ display: index === data.step ? "" : "none" }} class={styles[item.className]}>
-								<img src={item.img} />
-							</div>
-						))}
-					</div>
-					<div onClick={(e: Event) => e.stopPropagation()}>
-						{data.steps.map((item, index) => (
-							<div style={{ display: index === data.step ? "" : "none" }} class={[styles.item, ['Woodwind', 'Tenor Recorder'].includes(query.code) && styles.itemScale]}>
-								<div class={styles.title}>
-									<img src={icons.guide_2} />
-									<div class={styles.des} style={{fontSize: index === 2 ? '0.34667rem' : ''}}>
-										{item.des}
-									</div>
-								</div>
-								<div class={styles.icon}>
-									<img src={icons.guide_1} />
-								</div>
-								<Button class={styles.btn} round type="primary" onClick={() => handleNext()}>
-									我知道了
-								</Button>
-							</div>
-						))}
-					</div>
-				</div>
-			</Popup>
-		);
-	},
+    const endGuide = () => {
+      emit("close", true);
+    };
+    return () => (
+      <Popup zIndex={5051} teleport="body" overlay={false} closeOnClickOverlay={false} class={["popup-custom", styles.fingerGuide]} v-model:show={data.show}>
+        <div class={styles.content} onClick={() => handleNext()}>
+          <div class={styles.box} style={data.box}>
+            {data.steps.map((item, index) => (
+              <div style={{ display: index === data.step ? "" : "none" }} class={styles[item.className]}>
+                <img src={item.img} />
+              </div>
+            ))}
+          </div>
+          <div onClick={(e: Event) => e.stopPropagation()}>
+            {/* // , ["Woodwind", "Tenor Recorder", "BaroqueRecorder"].includes(query.code) && styles.itemScale] */}
+            {data.steps.map((item, index) => (
+              <div style={{ display: index === data.step ? "" : "none" }} class={[styles.item, props.fingeringMode === "scaleMode" && styles.fingeringMode, styles[item.classTip]]}>
+                <div class={styles.icon}>
+                  <img src={icons.guide_3} />
+                </div>
+                <Button class={styles.btn} round type="primary" onClick={() => handleNext()}>
+                  我知道了
+                </Button>
+                <div class={styles.title}>
+                  <img src={icons.guide_4} />
+                  <div class={styles.des} style={{ fontSize: index === 2 ? "0.34667rem" : "" }}>
+                    {item.des}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </Popup>
+    );
+  },
 });

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

@@ -5,65 +5,71 @@ import { getQuery } from "/src/utils/queryString";
 
 type guideType = "detail" | "finger";
 export default defineComponent({
-	name: "guide-index",
-	props: {
-		list: {
-			type: Array as PropType<guideType[]>,
-			default: "",
-		},
-		showGuide: {
-			type: Boolean,
-			default: true,
-		}
-	},
-	setup(props) {
-        const query = getQuery();
-		const detailGuideKey = "detailGuideKey";
-		const fingerGuideKey = "fingerGuideKey";
-		const data = reactive({
-			list: props.list,
-			detailShow: false,
-			fingerShow: false,
-		});
-		const init = () => {
-            if (props.showGuide && !query.showGuide) return;
-			if (data.list.includes("detail")) {
-				if (localStorage.getItem(detailGuideKey)) return;
-				setTimeout(() => {
-					data.detailShow = true;
-				}, 300)
-			}
-			if (data.list.includes("finger")) {
-				if (localStorage.getItem(fingerGuideKey)) return;
-				data.fingerShow = true;
-			}
-		};
-		onMounted(() => {
-			init();
-		});
-		return () => (
-			<>
-				{data.detailShow && (
-					<DetailGuide
-						onClose={(val) => {
-							if (val) {
-								localStorage.setItem(detailGuideKey, "1");
-							}
-							data.detailShow = false;
-						}}
-					/>
-				)}
-				{data.fingerShow && (
-					<FingerGuide
-						onClose={(val) => {
-							if (val) {
-								localStorage.setItem(fingerGuideKey, "1");
-							}
-							data.fingerShow = false;
-						}}
-					/>
-				)}
-			</>
-		);
-	},
+  name: "guide-index",
+  props: {
+    list: {
+      type: Array as PropType<guideType[]>,
+      default: "",
+    },
+    showGuide: {
+      type: Boolean,
+      default: true,
+    },
+    /** 听音练习的模式 */
+    fingeringMode: {
+      type: String,
+      default: "",
+    },
+  },
+  setup(props) {
+    const query = getQuery();
+    const detailGuideKey = "detailGuideKey";
+    const fingerGuideKey = "fingerGuideKey";
+    const data = reactive({
+      list: props.list,
+      detailShow: false,
+      fingerShow: false,
+    });
+    const init = () => {
+      if (props.showGuide && !query.showGuide) return;
+      if (data.list.includes("detail")) {
+        if (localStorage.getItem(detailGuideKey)) return;
+        setTimeout(() => {
+          data.detailShow = true;
+        }, 300);
+      }
+      if (data.list.includes("finger")) {
+        if (localStorage.getItem(fingerGuideKey)) return;
+        data.fingerShow = true;
+      }
+    };
+    onMounted(() => {
+      init();
+    });
+    return () => (
+      <>
+        {data.detailShow && (
+          <DetailGuide
+            onClose={(val) => {
+              if (val) {
+                localStorage.setItem(detailGuideKey, "1");
+              }
+              data.detailShow = false;
+            }}
+          />
+        )}
+        {data.fingerShow && (
+          <FingerGuide
+            fingeringMode={props.fingeringMode}
+            onClose={(val) => {
+              if (val) {
+                localStorage.setItem(fingerGuideKey, "1");
+              }
+              data.fingerShow = false;
+            }}
+          />
+        )}
+      </>
+    );
+  },
 });

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

@@ -45,62 +45,61 @@
         transition: all 0.25s;
         border-radius: 8px;
     }
-    .boxItem1{
+
+    .boxItem1 {
         position: absolute;
         left: -32px;
         top: -55px;
-        img{
+
+        img {
             width: 94px;
         }
     }
-    .boxItem2{
+
+    .boxItem2 {
         position: absolute;
         left: -12px;
         top: -40px;
-        img{
+
+        img {
             width: 42px;
         }
     }
-    .boxItem3{
+
+    .boxItem3 {
         position: absolute;
         left: 20px;
         top: 0;
-        img{
+
+        img {
             width: 83px;
         }
     }
 
     .item {
         position: absolute;
-        right: 50px;
-        bottom: 0;
-
-        .title {
-            width: 182px;
+        right: 42px;
+        bottom: 195px;
+        transition: all .3s ease;
 
-            img {
-                width: 100%;
-                height: 67px;
-                display: block;
-            }
+        &.fingeringMode {
+            transition: all .3s ease;
+            bottom: 42px;
+        }
 
-            .des {
-                position: absolute;
-                left: 0;
-                top: 0;
-                padding: 8px 8px 0 10px;
-                font-size: 12px;
-                color: #FFFFFF;
-                line-height: 19px;
-            }
+        &.boxTip2,
+        &.boxTip3 {
+            transition: all .3s ease;
+            bottom: 42px;
         }
 
         .icon {
-            width: 88px;
-            height: 99px;
-            margin-left: auto;
-            margin-right: -39px;
-            margin-top: -17px;
+            width: 86px;
+            height: 131px;
+            // margin-left: auto;
+            // margin-right: -39px;
+            // margin-top: -17px;
+            margin-bottom: -58px;
 
             img {
                 width: 100%;
@@ -112,8 +111,8 @@
 
         .btn {
             position: absolute;
-            left: 0;
-            bottom: 45px;
+            right: 8px;
+            top: 37px;
             width: 83px;
             height: 27px;
             line-height: 27px;
@@ -126,7 +125,30 @@
             padding: 0;
         }
 
-        &.itemScale{
+        .title {
+            position: relative;
+            width: 191px;
+
+            img {
+                width: 100%;
+                height: 71px;
+                display: block;
+            }
+
+            .des {
+                position: absolute;
+                left: 0;
+                top: 0;
+                padding: 21px 10px 0 10px;
+                font-size: 13px;
+                color: #FFFFFF;
+                line-height: 19px;
+            }
+        }
+
+
+
+        &.itemScale {
             transform: scale(.8);
             transform-origin: right bottom;
             right: 35px;

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

@@ -839,6 +839,11 @@
         }
 
         &:active {
+            opacity: .8;
+        }
+
+        // &:active,
+        &.active {
             // opacity: .8;
             background: linear-gradient(180deg, #F4EFED 0%, #D9CEC7 100%);
             box-shadow: 0px 1px 2px 0px #9F9690, inset 0px -2px 0px 0px #CDC0B5, inset 0px 2px 1px 0px #FFFFFF;
@@ -873,8 +878,12 @@
                 opacity: 0.2;
             }
 
-            &:last-child::after {
-                display: none;
+            &:last-child {
+                margin-bottom: 0;
+
+                &::after {
+                    display: none;
+                }
             }
         }
     }
@@ -915,7 +924,9 @@
 }
 
 .toggleBtnhulusi {
+    min-height: 53px;
     height: auto;
+    padding: 0 5px;
     // padding: 14px 0 15px 12px;
     // background-image: url('./image/icon_trans_bg_hu.png');
     // background-size: 100% 100%;
@@ -925,7 +936,45 @@
         height: 5px !important;
     }
 
-    .noteKeyBtn {}
+    .noteKey {
+        display: inline-block;
+        font-size: 12px;
+        position: relative;
+
+        .dot {
+            display: inline-block;
+            position: absolute;
+            top: 0;
+        }
+
+        .noteName {
+            padding-top: 4px;
+        }
+    }
+
+
+}
+
+.toggleBtnhulusi2 {
+    min-height: 42px;
+    height: auto;
+
+    .oterhD {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
+        &>div {
+            display: flex;
+        }
+    }
+
+    img {
+        margin-top: 4px;
+        width: 9px !important;
+        height: 5px !important;
+    }
 }
 
 .tones {

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

@@ -237,6 +237,7 @@ export default defineComponent({
         data.viewIndex = 0;
         data.noteType = "all";
       }
+      data.tipShow = false;
       resetMode(true, 0);
       setTimeout(() => {
         __init(false);
@@ -911,6 +912,7 @@ export default defineComponent({
                   if (data.subject === val.value) return;
                   data.subject = val.value;
                   data.viewIndex = 0;
+                  data.tipShow = false;
                   data.loadingDom = true;
                   fingerData.fingeringInfo = subjectFingering(data.subject);
                   resetElement();
@@ -1165,70 +1167,47 @@ export default defineComponent({
                 <span>使用</span>
               </div>
 
-              <div id="finger-note-1" class={[styles.baseBtn, styles.toggleBtnhulusi]} onClick={() => (data.tnoteShow = true)}>
-                <div>
-                  全按作
-                  <div class={[styles.noteKey, styles.noteKeyBtn]}>
-                    {/* {data.activeTone.step > 0 ? <span class={styles.dot}></span> : null} */}
-                    <span class={styles.dot}></span>
+              {!!data.tones.length && data.fingeringMode === "scaleMode" && (
+                <>
+                  {fingerData.fingeringInfo.name == "hulusi-flute" ? (
+                    <div id="finger-note-1" class={[styles.baseBtn, styles.toggleBtnhulusi, styles.active]} onClick={() => (data.tnoteShow = true)}>
+                      <div>
+                        全按作
+                        <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> */}
-                      <sup>#</sup>
-                      {/* {data.activeTone.key} */}5
+                          <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>
-                    {/* {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.baseBtn, styles.toggleBtnhulusi]} onClick={() => (data.tnoteShow = true)}>
-                <div style={{ display: "flex" }}>
-                  <div style={{ marginTop: "-4px" }}>
-                    <sup>{data.activeTone.mark && (data.activeTone.mark === "rise" ? "#" : "b")}</sup>
-                    {data.activeTone.name}
-                  </div>
-                  调
-                   <img src={icons.icon_arrow} />
-                </div>
-              </div> */}
+                  ) : (
+                    <div id="finger-note-1" class={[styles.baseBtn, styles.toggleBtnhulusi2, styles.active]} onClick={() => (data.tnoteShow = true)}>
+                      <div class={styles.oterhD}>
+                        <div>
+                          <div style={{ marginTop: "-4px" }}>
+                            <sup>{data.activeTone.mark && (data.activeTone.mark === "rise" ? "#" : "b")}</sup>
+                            {data.activeTone.name}
+                          </div>
+                          调
+                        </div>
+                        <img src={icons.icon_arrow} />
+                      </div>
+                    </div>
+                  )}
+                </>
+              )}
             </div>
 
             <div class={[styles.baseBtn, !instrumentTranstion.value && styles.resetBtn]} style={{ marginTop: "8px" }} onClick={() => resetElement()}>
               <img src={icons.icon_2_0} />
               <span>还原</span>
             </div>
-
-            {/* {!!data.tones.length && data.fingeringMode === "scaleMode" && (
-              <>
-                {fingerData.fingeringInfo.name == "hulusi-flute" ? (
-                  <div id="finger-note-1" class={[styles.toggleBtn, styles.toggleBtnhulusi]} onClick={() => (data.tnoteShow = true)}>
-                    <div>
-                      全按作
-                      <div class={[styles.noteKey]}>
-                        {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 style={{ marginTop: "-4px" }}>
-                      <sup>{data.activeTone.mark && (data.activeTone.mark === "rise" ? "#" : "b")}</sup>
-                      {data.activeTone.name}
-                    </div>
-                    调
-                    <img src={icons.icon_arrow} />
-                  </div>
-                )}
-              </>
-            )} */}
           </div>
 
           <Popup class="tonePopup" v-model:show={data.tnoteShow} position={state.platform !== IPlatform.PC && !query.modelType && fingerData.fingeringInfo.orientation === 1 ? "bottom" : "right"}>
@@ -1295,7 +1274,7 @@ export default defineComponent({
             </div>
           </Popup>
 
-          {props.show && !data.loading && !data.loadingSoundFonts && <GuideIndex showGuide={false} list={["finger"]} />}
+          {props.show && !data.loading && !data.loadingSoundFonts && <GuideIndex fingeringMode={data.fingeringMode} showGuide={false} list={["finger"]} />}
         </div>
       );
     };