样式

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

@@ -43,7 +43,9 @@ export default defineComponent({
 					width: (data.step === 2 ? 0 : eleRect.width) + "px",
 					height: (data.step === 2 ? 0 : eleRect.height) + "px",
 				};
-			}
+			} else {
+                handleNext()
+            }
 		};
 		onMounted(() => {
 			getStepELe();

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

@@ -330,14 +330,14 @@ export default defineComponent({
 							</div>
 						</div>
 					</div>
-					<div id="finger-note-1" class={styles.toggleBtn} onClick={() => (data.tnoteShow = true)}>
+					{data.tones.length && <div id="finger-note-1" class={styles.toggleBtn} onClick={() => (data.tnoteShow = true)}>
 						<div>
 							<sup>{data.activeTone.mark && (data.activeTone.mark === "rise" ? "#" : "b")}</sup>
 							{data.activeTone.name}
 						</div>
 						调
 						<img src={icons.icon_arrow} />
-					</div>
+					</div>}
 
 					<Popup
 						class="tonePopup"

src/view/fingering/fingering-config.ts

@@ -19,6 +19,9 @@ export type IFingering = {
 	/** 横竖屏 0:横屏 1: 竖屏 */
 	orientation?: number;
 	code?: string;
+	transform?: string;
+	/** 是否有替指 */
+	hasTizhi?: boolean;
 };
 
 type ITypeContent = {
@@ -128,12 +131,14 @@ export const subjectFingering = (subjectId: number | string): IFingering => {
 				name: "flute",
 				direction: "transverse",
 				height: "1.6rem",
+				hasTizhi: true,
 			};
 		case 4: // 单簧管
 			return {
 				name: "clarinet",
 				direction: "vertical",
 				width: "3rem",
+				hasTizhi: true,
 			};
 		case 5: // 萨克斯
 		case 6: // 中音萨克斯
@@ -141,36 +146,42 @@ export const subjectFingering = (subjectId: number | string): IFingering => {
 				name: "saxophone",
 				direction: "vertical",
 				width: "4.34rem",
+				hasTizhi: true,
 			};
 		case 12: // 小号
 			return {
 				name: "trumpet",
 				direction: "transverse",
 				height: "1.6rem",
+				hasTizhi: false,
 			};
 		case 13: // 圆号
 			return {
 				name: "horn",
 				direction: "vertical",
 				width: "4.98rem",
+				hasTizhi: false,
 			};
 		case 14: // 长号
 			return {
 				name: "trombone",
 				direction: "transverse",
 				height: "1.6rem",
+				hasTizhi: false,
 			};
 		case 15: // 上低音号
 			return {
 				name: "up-bass-horn",
 				direction: "vertical",
 				width: "4.34rem",
+				hasTizhi: false,
 			};
 		case 17: // 大号
 			return {
 				name: "tuba",
 				direction: "vertical",
 				width: "4.34rem",
+				hasTizhi: false,
 			};
 		case 120: // 短笛
 			return {
@@ -178,6 +189,7 @@ export const subjectFingering = (subjectId: number | string): IFingering => {
 				direction: "vertical",
 				width: "3rem",
 				orientation: 1,
+				hasTizhi: true,
 			};
 		case "piccolo": // 竖笛
 			return {
@@ -185,7 +197,9 @@ export const subjectFingering = (subjectId: number | string): IFingering => {
 				direction: "vertical",
 				width: "3rem",
 				orientation: 1,
-				code: '竖笛'
+				code: '竖笛',
+				transform: 'scale(1.5) translateY(-0.5rem)',
+				hasTizhi: true,
 			};
 		case "hulusi-flute": // 葫芦丝
 			return {
@@ -193,7 +207,9 @@ export const subjectFingering = (subjectId: number | string): IFingering => {
 				direction: "vertical",
 				width: "3rem",
 				orientation: 1,
-				code: '葫芦丝'
+				code: '葫芦丝',
+				transform: 'scale(1.6) translateY(-1rem)',
+				hasTizhi: false,
 			};
 		case "pan-flute": // 排箫
 			return {
@@ -202,7 +218,8 @@ export const subjectFingering = (subjectId: number | string): IFingering => {
 				height: "2.6rem",
 				disabledFinger: true,
 				orientation: 0,
-				code: '排箫'
+				code: '排箫',
+				hasTizhi: false,
 			};
 		case "ocarina": // 陶笛
 			return {
@@ -211,7 +228,8 @@ export const subjectFingering = (subjectId: number | string): IFingering => {
 				width: "3rem",
 				disabledFinger: true,
 				orientation: 0,
-				code: '陶笛'
+				code: '陶笛',
+				hasTizhi: false,
 			};
 		case "melodica": // 口风琴
 			return {
@@ -219,7 +237,8 @@ export const subjectFingering = (subjectId: number | string): IFingering => {
 				direction: "transverse",
 				height: "1.8rem",
 				orientation: 0,
-				code: '口风琴'
+				code: '口风琴',
+				hasTizhi: false,
 			};
 		default:
 			return {};

src/view/fingering/index.module.less

@@ -1,4 +1,4 @@
-.fingeringContainer{
+.fingeringContainer {
   width: 100%;
   height: 100%;
   display: flex;
@@ -6,18 +6,44 @@
   align-items: center;
   padding: 0 10px 6px 10px;
 }
-.vertical{
+
+.vertical {
+  position: relative;
   padding: 10px 6px 10px 0;
   box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 10px;
-  .imgs{
-    width: 70%;
+
+  .imgs {
+    flex: 1;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    height: 30px;
+    background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
+    z-index: 1;
+  }
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    height: 30px;
+    background: linear-gradient(360deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
+    z-index: 1;
   }
 }
-.imgs{
+
+.imgs {
   position: relative;
   width: 84%;
   height: 100%;
-  & > img {
+
+  &>img {
     position: absolute;
     left: 50%;
     top: 50%;
@@ -27,58 +53,71 @@
     max-height: 100%;
   }
 }
-.rightContent{
+
+.rightContent {
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  justify-content: space-evenly;
   align-items: center;
   height: 100%;
+  flex-shrink: 0;
 }
+
 // 萨克斯
-:global(.saxophone){
+:global(.saxophone) {
   padding: 10px 0;
-  .imgs{
+
+  .imgs {
     width: 100%;
   }
-  .rightContent{
+
+  .rightContent {
     position: absolute;
     right: 6px;
     height: 90%;
   }
 }
+
 //圆号
-:global(.horn){
+:global(.horn) {
   padding: 10px 4px;
-  .imgs{
+
+  .imgs {
     width: 100%;
   }
-  .rightContent{
+
+  .rightContent {
     position: absolute;
     right: 10px;
     height: 100%;
   }
 }
+
 //上低音号
 :global(.up-bass-horn),
-:global(.tuba){
+:global(.tuba) {
   padding: 10px 4px;
-  .imgs{
+
+  .imgs {
     width: 100%;
   }
-  .rightContent{
+
+  .rightContent {
     position: absolute;
     right: 10px;
     height: 100%;
   }
 }
-.yidiao{
+
+.yidiao {
   width: 30px;
   color: var(--van-primary-color);
   font-size: 12Px;
   text-align: center;
   opacity: 0;
 }
-.tizhi{
+
+.tizhi {
   width: 30px;
   height: 30px;
   text-align: center;
@@ -90,44 +129,72 @@
   font-size: 12Px;
   opacity: 0;
   pointer-events: none;
-  &:active{
+
+  &:active {
     opacity: .8;
   }
 }
-.canDisplay{
+
+.canDisplay {
   opacity: 1;
   pointer-events: initial;
 }
 
 
 @keyframes activeopacity {
-  0%   {transforopacitym: 0;}
-  100% {opacity: 1;}
+  0% {
+    transforopacitym: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
 }
+
 @keyframes leftrotates {
-  0%   {transform: rotate(0deg);}
-  50%  {transform: rotate(-10deg);}
-  100% {transform: rotate(-10deg);}
+  0% {
+    transform: rotate(0deg);
+  }
+
+  50% {
+    transform: rotate(-10deg);
+  }
+
+  100% {
+    transform: rotate(-10deg);
+  }
 }
+
 @keyframes rightrotates {
-  0%   {transform: rotate(0deg);}
-  50%  {transform: rotate(5deg);}
-  100% {transform: rotate(5deg);}
+  0% {
+    transform: rotate(0deg);
+  }
+
+  50% {
+    transform: rotate(5deg);
+  }
+
+  100% {
+    transform: rotate(5deg);
+  }
 }
 
-:global{
-  .small-drum{
+:global {
+  .small-drum {
+
     // transform: ;
     img[data-index="active"] :local {
       animation: activeopacity .2s;
       animation-delay: .3s;
       transform-origin: 0px 0px;
     }
+
     img[data-index="left"] :local {
       // transform: rotate(-10deg);
       animation: leftrotates .5s;
       transform-origin: 0px 0px;
     }
+
     img[data-index="right"] :local {
       // transform: rotate(5deg);
       animation: rightrotates .5s;
@@ -136,13 +203,14 @@
   }
 }
 
-:global{
-  .piccolo{
+:global {
+  .piccolo {
     margin-top: 0;
+
     // padding: 0 10px;
     // padding-right: 40px;
-    >.piccolo{
+    >.piccolo {
       // padding: 0!important;
     }
   }
-}
+}

src/view/fingering/index.tsx

@@ -5,12 +5,12 @@ import { getFingeringConfig, ITypeFingering } from "./fingering-config";
 
 export default defineComponent({
 	name: "fingering",
-	emits: ['open'],
+	emits: ["open"],
 	setup(props, { emit }) {
 		const fingerData = reactive({
 			relationshipIndex: 0,
 			subject: null as unknown as ITypeFingering,
-			delay: 0
+			delay: 0,
 		});
 		const getFingeringData = async () => {
 			fingerData.subject = await getFingeringConfig(state.fingeringInfo.name);
@@ -27,13 +27,13 @@ export default defineComponent({
 		const doubeClick = () => {
 			const nowTime = Date.now();
 			if (nowTime - fingerData.delay < 300) {
-				emit('open')
+				emit("open");
 				return;
 			}
 			fingerData.delay = nowTime;
-		}
+		};
 		return () => {
-			console.log('音高', realKey.value)
+			// console.log("音高", realKey.value);
 			const relationship = fingerData.subject?.relationship?.[realKey.value] || [];
 			const rs: number[] = Array.isArray(relationship[1])
 				? relationship[fingerData.relationshipIndex]
@@ -53,18 +53,23 @@ export default defineComponent({
 								})}
 							</div>
 
-							<div
-								class={[styles.tizhi, canTizhi && styles.canDisplay]}
-								onClick={() =>
-									(fingerData.relationshipIndex = fingerData.relationshipIndex === 0 ? 1 : 0)
-								}
-							>
-								替指
-							</div>
+							{state.fingeringInfo.hasTizhi && (
+								<div
+									class={[styles.tizhi, canTizhi && styles.canDisplay]}
+									onClick={() =>
+										(fingerData.relationshipIndex = fingerData.relationshipIndex === 0 ? 1 : 0)
+									}
+								>
+									替指
+								</div>
+							)}
 						</div>
 					) : (
-						<div onClick={() => doubeClick()} class={[styles.fingeringContainer, styles.vertical, state.fingeringInfo.name]}>
-							<div class={styles.imgs}>
+						<div
+							onClick={() => doubeClick()}
+							class={[styles.fingeringContainer, styles.vertical, state.fingeringInfo.name]}
+						>
+							<div class={styles.imgs} style={{ transform: state.fingeringInfo.transform }}>
 								<img src={fingerData.subject?.json?.full} />
 								{rs.map((key: number | string, index: number) => {
 									const nk: string = typeof key === "string" ? key.replace("active-", "") : String(key);
@@ -72,20 +77,22 @@ export default defineComponent({
 								})}
 							</div>
 
-							<div
-								style={{ display: state.fingeringInfo.disabledFinger ? "none" : "" }}
-								class={styles.rightContent}
-							>
-								<span class={[styles.yidiao, rs.includes(0) && styles.canDisplay]}>转调</span>
+							{state.fingeringInfo.hasTizhi && (
 								<div
-									class={[styles.tizhi, canTizhi && styles.canDisplay]}
-									onClick={() =>
-										(fingerData.relationshipIndex = fingerData.relationshipIndex === 0 ? 1 : 0)
-									}
+									style={{ display: state.fingeringInfo.disabledFinger ? "none" : "" }}
+									class={styles.rightContent}
 								>
-									替指
+									<span class={[styles.yidiao, rs.includes(0) && styles.canDisplay]}>转调</span>
+									<div
+										class={[styles.tizhi, canTizhi && styles.canDisplay]}
+										onClick={() =>
+											(fingerData.relationshipIndex = fingerData.relationshipIndex === 0 ? 1 : 0)
+										}
+									>
+										替指
+									</div>
 								</div>
-							</div>
+							)}
 						</div>
 					)}
 				</>