顶部

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

@@ -98,6 +98,9 @@
             margin-left: 0;
         }
     }
+    &.paddingTop{
+        padding-top: 25Px;
+    }
 
     .baseBtn {
         width: 85px;

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

@@ -21,7 +21,7 @@ import {
 } from "/src/view/fingering/fingering-config";
 import { Howl } from "howler";
 import { storeData } from "/src/store";
-import { api_back, api_cloudLoading, api_setRequestedOrientation } from "/src/helpers/communication";
+import { api_back, api_cloudLoading, api_setRequestedOrientation, isSpecialShapedScreen } from "/src/helpers/communication";
 import Hammer from "hammerjs";
 import { Button, Icon, Loading, Popup, Progress, Space } from "vant";
 import GuideIndex from "./guide/guide-index";
@@ -78,6 +78,7 @@ export default defineComponent({
 			loadingSoundProgress: 0,
 
 			huaweiPad: navigator?.userAgent?.includes("UAWEIVRD-W09") ? true : false,
+			paddingTop: ''
 		});
 		const fingerData = reactive({
 			relationshipIndex: 0,
@@ -85,11 +86,20 @@ export default defineComponent({
 			fingeringInfo: subjectFingering(data.subject),
 		});
 
-		// if (!props.isComponent) {
-		// 	if (fingerData.fingeringInfo.orientation === 0) {
-		// 		api_setRequestedOrientation(fingerData.fingeringInfo.orientation);
-		// 	}
-		// }
+		const getAPPData = async () => {
+			const screenData = await isSpecialShapedScreen();
+			if (screenData?.content) {
+				// console.log("🚀 ~ screenData:", screenData.content);
+				const { isSpecialShapedScreen, notchHeight } = screenData.content;
+				if (isSpecialShapedScreen) {
+					data.paddingTop = 25 + "px";
+				}
+			}
+		};
+
+		if (!props.isComponent && !browsInfo.ios && fingerData.fingeringInfo.orientation === 1) {
+			getAPPData();
+		}
 
 		const getNotes = () => {
 			const fignerData = FIGNER_INSTRUMENT_DATA[data.subject as keyof typeof FIGNER_INSTRUMENT_DATA];
@@ -310,7 +320,7 @@ export default defineComponent({
 							: styles.fingerRight,
 					]}
 				>
-					<div class={[styles.head, styles.backHead]}>
+					<div class={[styles.head, styles.backHead, data.paddingTop && styles.paddingTop]}>
 						<div class={styles.left}>
 							<button class={[styles.backBtn]} onClick={() => handleBack()}>
 								<img src={icons.icon_back} />
@@ -318,7 +328,7 @@ export default defineComponent({
 						</div>
 					</div>
 
-					<div class={styles.head}>
+					<div class={[styles.head, data.paddingTop && styles.paddingTop]}>
 						<div class={styles.left}>
 							{data.subject === "pan-flute" && (
 								<div