提交

1

src/custom-plugins/guide-page/woring-guide.tsx

@@ -10,7 +10,7 @@ export default defineComponent({
   emits: ["close"],
   setup(props, { emit }) {
     const data = reactive({
-      box: {},
+      box: {height:''} as any,
       show: false,
       steps: [
         {
@@ -18,40 +18,46 @@ export default defineComponent({
           eleRect: {} as DOMRect,
           img: getImage("woring1.png"),
           handStyle: {
-            top: "2.98rem",
+            // top: "2.98rem",
             left:'4.5rem'
           },
           imgStyle: {
-            top: "3.3rem",
+            width:'5.46rem',
+            height:'2.6rem',
+            top: "1.2rem",
             left:'2.1rem'
           },
           btnsStyle: {
-            top: "6.2rem",
+            top: "4.2rem",
             left:'3.5rem'
           },
           boxStyle:{
             transform: 'scale(1)'
           },
+          type:'bottom'
         },
         {
           ele: "",
           eleRect: {} as DOMRect,
           img: getImage("woring2.png"),
           handStyle: {
-            top: "2.98rem",
+            // top: "2.98rem",
             left:'4.5rem'
           },
           imgStyle: {
-            top: "3.3rem",
-            left:'2.1rem'
+            top: "1.2rem",
+            left:'2.1rem',
+            width:'5.46rem',
+            height:'2.6rem',
           },
           btnsStyle: {
-            top: "6.2rem",
+            top: "4.2rem",
             left:'3.5rem'
           },
           boxStyle:{
             transform: 'scale(1)'
           },
+          type:'bottom'
         },
         {
           ele: "",
@@ -77,7 +83,7 @@ export default defineComponent({
       step: 0,
     });
     const tipShow = ref(false)
-
+    const isPad = ref(true)
     const getStepELe = () => {
 
       const ele: HTMLElement = document.getElementById(`woring-${data.step}`)!;
@@ -89,6 +95,7 @@ export default defineComponent({
           width: eleRect.width + "px",
           height: eleRect.height + "px",
         };
+        console.log(data.box?.height)
       }else{
         handleNext()
       }
@@ -101,8 +108,15 @@ export default defineComponent({
         }else {
          tipShow.value =true
         }
+        var docEl = document.documentElement;
+        var clientWidth = docEl.clientWidth;
+        if(clientWidth>750){
+          isPad.value = true;
+        }else{
+          isPad.value = false;
+        }
         getStepELe();
-      },300)
+      },500)
       window.addEventListener("resize", resetSize);
     });
     const resetSize = ()=>{
@@ -148,16 +162,21 @@ export default defineComponent({
         </div>}
         <div class={styles.box} style={{...data.box,...data.steps[data.step].boxStyle}} id={`modeType-${data.step}`}>
           {data.steps.map((item: any, index) => (
-
+            //   top: `${item.imgStyle?.height}`    top: `${item.eleRect?.top}px`,
             <div
               onClick={(e: Event) => e.stopPropagation()}
               class={styles.item}
-              style={{
+              style={ item.type == 'bottom'?{
+                display: index === data.step ? '' : 'none',
+                left: `${item.eleRect?.left}px`,
+                top:  `${data.box?.height}`,
+              }:{
                 display: index === data.step ? "" : "none",
                 left: `${item.eleRect?.left}px`,
                 top: `${item.eleRect?.top}px`,
               }}
             >
+
               <img class={styles.img} style={item.imgStyle} src={item.img} />
               <img class={styles.iconHead} style={item.handStyle} src={getImage("indexDot.png")} />
               <div class={styles.btns} style={item.btnsStyle}>