loading

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

@@ -53,11 +53,6 @@
                 margin-bottom: -238px;
             }
         }
-        .head{
-            .left{
-                padding-left: 25px;
-            }
-        }
     }
 }
 
@@ -66,7 +61,6 @@
     left: 0;
     top: 10px;
     right: 0;
-    z-index: 10;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -75,8 +69,7 @@
     padding-top: env(safe-area-inset-top);
 
     .backBtn {
-        width: 22px;
-        height: 22px;
+        padding: 25px 30px 25px 33px;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -85,17 +78,12 @@
         cursor: pointer;
 
         img {
-            width: 100%;
-            height: 100%;
-        }
-
-        &.backRight {
-            margin-right: 30px;
+            width: 22px;
+            height: 22px;
         }
     }
 
     .left {
-        padding: 25px 33px;
         display: flex;
         align-items: center;
         pointer-events: auto;
@@ -278,7 +266,8 @@
         background: rgba(255, 255, 255, 0.53);
         border: 1px solid rgba(255, 255, 255, 0.81);
         overflow: hidden;
-        &.huaweiPad{
+
+        &.huaweiPad {
             border-radius: 8px;
         }
 
@@ -332,10 +321,12 @@
                 font-weight: bold;
             }
         }
+
         &.disabled {
             color: rgba(69, 143, 177, .32);
         }
-        &::before{
+
+        &::before {
             opacity: 0 !important;
         }
     }
@@ -412,7 +403,7 @@
     padding: 0 10px 6px 10px;
 }
 
-.loading{
+.loading {
     position: absolute;
     left: 0;
     top: 0;
@@ -421,16 +412,44 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    z-index: 5;
+    z-index: 100;
+    background: rgba(0, 0, 0, .6);
 }
-.loadingWrap{
+
+.loadingWrap {
+    position: relative;
     width: 295px;
-    .loadingIcon{
+    padding: 21px 17px;
+    background: rgba(135, 135, 135, .72);
+    border-radius: 24px;
+
+    .loadingIcon {
         position: absolute;
         left: 50%;
-        top: 50%;
-        transform: translate(-50%,-50%);
-        width: 80%;
+        top: -35px;
+        transform: translateX(-50%);
+        width: 216px;
+    }
+
+    :global {
+        .van-progress {
+            height: 7px;
+        }
+
+        .van-progress__portion {
+            background: linear-gradient(180deg, #3CD6F9 0%, #1CACF1 100%);
+        }
+
+        .van-progress__pivot {
+            top: 0;
+            color: transparent;
+            background-color: transparent;
+            width: 35px;
+            height: 37px;
+            background-image: url('./image/icon_loading_head.png');
+            background-repeat: no-repeat;
+            background-size: 100%;
+        }
     }
 }
 

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

@@ -29,8 +29,6 @@ import { getQuery } from "/src/utils/queryString";
 import { browser } from "/src/utils";
 import { usePageVisibility } from "@vant/use";
 import { watch } from "vue";
-import { Vue3Lottie } from "vue3-lottie";
-import refesh_anim from "./refresh_anim.json";
 import icon_loading_img from './image/icon_loading_img.png'
 
 export default defineComponent({
@@ -77,6 +75,7 @@ export default defineComponent({
 
 			tnoteShow: false,
 			loadingSoundFonts: true,
+			loadingSoundProgress: 0,
 
 			huaweiPad: navigator?.userAgent?.includes('UAWEIVRD-W09') ? true : false
 		});
@@ -85,6 +84,12 @@ export default defineComponent({
 			subject: null as unknown as ITypeFingering,
 			fingeringInfo: subjectFingering(data.subject),
 		});
+
+		if (!props.isComponent){
+			if (fingerData.fingeringInfo.orientation === 0){
+				fingerData.fingeringInfo.orientation = 1
+			}
+		}
 		
 		const getNotes = () => {
 			const fignerData = FIGNER_INSTRUMENT_DATA[data.subject as keyof typeof FIGNER_INSTRUMENT_DATA];
@@ -114,12 +119,8 @@ export default defineComponent({
 
 			setTimeout(() => {
 				if (!props.isComponent){
-					console.log(fingerData.fingeringInfo.orientation)
 					if (fingerData.fingeringInfo.orientation === 1){
 						api_setRequestedOrientation(fingerData.fingeringInfo.orientation);
-						// fingerData.fingeringInfo.orientation = 1
-					} else {
-						fingerData.fingeringInfo.orientation = 1
 					}
 				}
 			}, 2000)
@@ -138,6 +139,7 @@ export default defineComponent({
 		const getSounFonts = async () => {
 			const pathname = /(192|localhost)/.test(location.origin) ? "/" : location.pathname;
 			data.loadingSoundFonts = true;
+			data.loadingSoundProgress = 0;
 			for (let i = 0; i < data.notes.length; i++) {
 				const note = data.notes[i];
 				// console.log("🚀 ~ note:", i);
@@ -145,10 +147,12 @@ export default defineComponent({
 				url += note.realName;
 				url += ".mp3";
 				data.soundFonts[note.realKey] = await createAudio(url);
+				data.loadingSoundProgress = Math.floor(((i + 1) / data.notes.length) * 100);
 			}
 			setTimeout(() => {
+				data.loadingSoundProgress = 100;
 				data.loadingSoundFonts = false;
-			}, 300);
+			}, 500);
 			// console.log("🚀 ~ data.soundFonts:", data.soundFonts);
 		};
 		onBeforeMount(() => {
@@ -318,7 +322,7 @@ export default defineComponent({
 					<div class={styles.head}>
 						<div class={styles.left}>
 							<button
-								class={[styles.backBtn, data.subject === "pan-flute" && styles.backRight]}
+								class={[styles.backBtn]}
 								onClick={() => handleBack()}
 							>
 								<img src={icons.icon_back} />
@@ -450,12 +454,8 @@ export default defineComponent({
 							<div class={styles.loading}>
 								<div class={styles.loadingWrap}>
 									<img class={styles.loadingIcon} src={icon_loading_img} />
-									<Progress percentage={20} />
+									<Progress percentage={data.loadingSoundProgress} />
 								</div>
-								<Vue3Lottie
-									style={{ width: "100px", height: "100px" }}
-									animationData={refesh_anim}
-								></Vue3Lottie>
 							</div>
 						)}
 					</div>