Browse Source

feat: 默认进入练习模式

TIANYONG 1 year ago
parent
commit
9afc8d7559

+ 43 - 33
src/page-instrument/custom-plugins/guide-page/student-top.tsx

@@ -22,17 +22,17 @@ export default defineComponent({
           eleRect: {} as DOMRect,
           eleRect: {} as DOMRect,
           img: getImage("studnetT1.png"),
           img: getImage("studnetT1.png"),
           handStyle: {
           handStyle: {
-            top: "1.3rem",
-            left:'0.3rem'
+            top: "0.67rem",
+            left:'0.1rem'
           },
           },
           imgStyle: {
           imgStyle: {
-            top: "1.9rem",
+            top: "1.2rem",
             width:'5.64rem',
             width:'5.64rem',
             height:'2.77rem',
             height:'2.77rem',
             left:'-2rem'
             left:'-2rem'
           },
           },
           btnsStyle: {
           btnsStyle: {
-            top: "5.1rem",
+            top: "4.4rem",
             left:'-0.7rem'
             left:'-0.7rem'
           },
           },
         },
         },
@@ -40,18 +40,18 @@ export default defineComponent({
           ele: "",
           ele: "",
           img: getImage("studnetT2.png"),
           img: getImage("studnetT2.png"),
           handStyle: {
           handStyle: {
-            top: "1.3rem",
-            left:'0.3rem',
+            top: "0.67rem",
+            left:'0.1rem',
   
   
           },
           },
           imgStyle: {
           imgStyle: {
-            top: "1.9rem",
+            top: "1.2rem",
             width:'5.46rem',
             width:'5.46rem',
             height:'2.3rem',
             height:'2.3rem',
             left:'-2rem'
             left:'-2rem'
           },
           },
           btnsStyle: {
           btnsStyle: {
-            top: "4.6rem",
+            top: "3.9rem",
             left:'-0.7rem'
             left:'-0.7rem'
           },
           },
         },
         },
@@ -59,17 +59,17 @@ export default defineComponent({
           ele: "",
           ele: "",
           img: getImage("studnetT3.png"),
           img: getImage("studnetT3.png"),
           handStyle: {
           handStyle: {
-            top: "1.3rem",
-            left:'0.3rem',
+            top: "0.67rem",
+            left:'0.1rem',
           },
           },
           imgStyle: {
           imgStyle: {
-            top: "1.9rem",
+            top: "1.2rem",
             width:'5.46rem',
             width:'5.46rem',
             height:'2.30rem',
             height:'2.30rem',
             left:'-2rem'
             left:'-2rem'
           },
           },
           btnsStyle: {
           btnsStyle: {
-            top: "4.6rem",
+            top: "3.9rem",
             left:'-0.7rem'
             left:'-0.7rem'
           },
           },
         },
         },
@@ -77,17 +77,17 @@ export default defineComponent({
           ele: "",
           ele: "",
           img: getImage("studnetT4.png"),
           img: getImage("studnetT4.png"),
           handStyle: {
           handStyle: {
-            top: "1.3rem",
-            left:'0.3rem',
+            top: "0.67rem",
+            left:'0.1rem',
           },
           },
           imgStyle: {
           imgStyle: {
-            top: "1.8rem",
+            top: "1.2rem",
             width:'5.46rem',
             width:'5.46rem',
             height:'2.30rem',
             height:'2.30rem',
             left:'-2rem'
             left:'-2rem'
           },
           },
           btnsStyle: {
           btnsStyle: {
-            top: "4.6rem",
+            top: "3.9rem",
             left:'-0.7rem'
             left:'-0.7rem'
           },
           },
         },
         },
@@ -95,18 +95,18 @@ export default defineComponent({
           ele: "",
           ele: "",
           img: getImage("studnetT5.png"),
           img: getImage("studnetT5.png"),
           handStyle: {
           handStyle: {
-            top: "1.3rem",
-            left:'0.3rem',
+            top: "0.67rem",
+            left:'0.1rem',
      
      
           },
           },
           imgStyle: {
           imgStyle: {
-            top: "1.8rem",
+            top: "1.2rem",
             width:'5.46rem',
             width:'5.46rem',
             height:'2.6rem',
             height:'2.6rem',
             left:'-3rem'
             left:'-3rem'
           },
           },
           btnsStyle: {
           btnsStyle: {
-            top: "4.8rem",
+            top: "4.1rem",
             left:'-1.3rem'
             left:'-1.3rem'
           },
           },
         },
         },
@@ -114,18 +114,18 @@ export default defineComponent({
           ele: "",
           ele: "",
           img: getImage("studnetT6.png"),
           img: getImage("studnetT6.png"),
           handStyle: {
           handStyle: {
-            top: "1.3rem",
-            left:'0.3rem',
+            top: "0.67rem",
+            left:'0.1rem',
          
          
           },
           },
           imgStyle: {
           imgStyle: {
-            top: "1.62rem",
+            top: "0.92rem",
             width:'5.46rem',
             width:'5.46rem',
             height:'2.30rem',
             height:'2.30rem',
             left:'-5.5rem'
             left:'-5.5rem'
           },
           },
           btnsStyle: {
           btnsStyle: {
-            top: "4.3rem",
+            top: "3.6rem",
             left:'-1.8rem'
             left:'-1.8rem'
           },
           },
         },
         },
@@ -134,17 +134,17 @@ export default defineComponent({
             eleRect: {} as DOMRect,
             eleRect: {} as DOMRect,
             img: getImage("studnetT7.png"),
             img: getImage("studnetT7.png"),
             handStyle: {
             handStyle: {
-                top: "1.3rem",
-                left:'0.3rem',
+                top: "0.67rem",
+                left:'0.1rem',
             },
             },
             imgStyle: {
             imgStyle: {
-              top: "1.62rem",
+              top: "0.92rem",
               width:'5.46rem',
               width:'5.46rem',
               height:'2.3rem',
               height:'2.3rem',
               left:'-5.5rem'
               left:'-5.5rem'
             },
             },
             btnsStyle: {
             btnsStyle: {
-              top: "4.3rem",
+              top: "3.6rem",
               left:'-3.7rem'
               left:'-3.7rem'
             },
             },
           },      {
           },      {
@@ -153,7 +153,7 @@ export default defineComponent({
             img: getImage("studnetT8.png"),
             img: getImage("studnetT8.png"),
             handStyle: {
             handStyle: {
               top: "-1.38rem",
               top: "-1.38rem",
-              left:'.45rem',
+              left:'.26rem',
               transform: 'rotate(180deg)'
               transform: 'rotate(180deg)'
             },
             },
             imgStyle: {
             imgStyle: {
@@ -169,6 +169,7 @@ export default defineComponent({
           },
           },
       ],
       ],
       step: 0,
       step: 0,
+      initDone: false,
     });
     });
     const tipShow = ref(false)
     const tipShow = ref(false)
     const query: any = getQuery();
     const query: any = getQuery();
@@ -214,6 +215,7 @@ export default defineComponent({
 					return
 					return
 				}
 				}
         const eleRect = ele.getBoundingClientRect();
         const eleRect = ele.getBoundingClientRect();
+        // console.log(eleRect,666)
         data.box = {
         data.box = {
           left: eleRect.x + "px",
           left: eleRect.x + "px",
           top: eleRect.y + "px",
           top: eleRect.y + "px",
@@ -223,7 +225,11 @@ export default defineComponent({
       }
       }
     };
     };
     onMounted(() => {
     onMounted(() => {
-      getStepELe();
+      // 顶部栏有个动画过度效果,位置会移动,需要加个延迟时间计算其移动后的位置
+      setTimeout(() => {
+        getStepELe();
+        data.initDone = true;
+      }, 1200);
     });
     });
 
 
 
 
@@ -249,6 +255,7 @@ export default defineComponent({
 			  }catch(e){
 			  }catch(e){
 				console.log(e)
 				console.log(e)
 			  }
 			  }
+      state.guideInfo = guideInfo.value;
       tipShow.value = false
       tipShow.value = false
     //  localStorage.setItem('endC')
     //  localStorage.setItem('endC')
     }
     }
@@ -265,8 +272,9 @@ export default defineComponent({
         
         
           跳过
           跳过
         </div>} 
         </div>} 
-        
-        <div class={styles.box} style={data.box} id={`modeType-${data.step}`}>
+        {
+          data.initDone &&
+          <div class={styles.box} style={data.box} id={`modeType-${data.step}`}>
           {data.steps.map((item: any, index) => (
           {data.steps.map((item: any, index) => (
 
 
             <div
             <div
@@ -309,7 +317,9 @@ export default defineComponent({
               </div>
               </div>
             </div>
             </div>
           ))}
           ))}
-        </div>
+          </div>          
+        }
+
       </div>
       </div>
       </Popup>
       </Popup>
     );
     );

+ 7 - 2
src/page-instrument/custom-plugins/guide-page/teacher-top.tsx

@@ -311,7 +311,11 @@ export default defineComponent({
       }
       }
     };
     };
     onMounted(() => {
     onMounted(() => {
-      getStepELe();
+      // 底部栏有个动画过度效果,位置会移动,需要加个延迟时间计算其移动后的位置
+      setTimeout(() => {
+        getStepELe();
+        // data.initDone = true;
+      }, 1200);
     });
     });
 
 
 
 
@@ -337,6 +341,7 @@ export default defineComponent({
 				console.log(e)
 				console.log(e)
 			  }
 			  }
       // localStorage.setItem('guideInfo',JSON.stringify(guideInfo))
       // localStorage.setItem('guideInfo',JSON.stringify(guideInfo))
+      state.guideInfo = guideInfo.value;
       tipShow.value = false
       tipShow.value = false
     //  localStorage.setItem('endC')
     //  localStorage.setItem('endC')
     }
     }
@@ -399,4 +404,4 @@ export default defineComponent({
       </Popup>
       </Popup>
     );
     );
   },
   },
-});
+});

+ 16 - 9
src/page-instrument/header-top/index.tsx

@@ -273,17 +273,24 @@ export default defineComponent({
         return;
         return;
       }
       }
       /** 作业模式 end */
       /** 作业模式 end */
-      if (query.modelType) {
-        if (query.modelType === "practise") {
-          headTopData.handleChangeModeType("practise");
-        } else if (query.modelType === "evaluating") {
-          headTopData.handleChangeModeType("evaluating");
+      if (state.defaultModeType == 1) {
+        headTopData.handleChangeModeType("practise");
+        if (query.modelType) {
+          headTopData.showBack = false;
         }
         }
-        headTopData.showBack = false;
       } else {
       } else {
-        setTimeout(() => {
-          headTopData.modeType = "init";
-        }, 500);
+        if (query.modelType) {
+          if (query.modelType === "practise") {
+            headTopData.handleChangeModeType("practise");
+          } else if (query.modelType === "evaluating") {
+            headTopData.handleChangeModeType("evaluating");
+          }
+          headTopData.showBack = false;
+        } else {
+          setTimeout(() => {
+            headTopData.modeType = "init";
+          }, 500);
+        }
       }
       }
     };
     };
 
 

+ 2 - 0
src/state.ts

@@ -471,6 +471,8 @@ const state = reactive({
   guideInfo: null as any,
   guideInfo: null as any,
   noteCoords: [] as any,
   noteCoords: [] as any,
   specialPosInit: false,
   specialPosInit: false,
+  /** 播放模式,默认练习模式 */
+  defaultModeType: 1,
 });
 });
 const browserInfo = browser();
 const browserInfo = browser();
 let offset_duration = 0;
 let offset_duration = 0;