fix

src/page-instrument/custom-plugins/guide-page/student-bottom.tsx

@@ -6,180 +6,180 @@ import { getImage } from "./images";
 import { getQuery } from "/src/utils/queryString";
 
 export default defineComponent({
-  name: "studentB-guide",
-  emits: ["close"],
-  setup(props, { emit }) {
-    const data = reactive({
-      box: {},
-      show: false,
-      steps: [
-        {
-          ele: "",
-          eleRect: {} as DOMRect,
-          img: getImage("studentB1.png"),
-          handStyle: {
-            top: "-1.39rem",
-            left:'1.4rem',
-            transform: 'rotate(180deg)'
-          },
-          imgStyle: {
-            top: "-5.01rem",
-            width:'6.48rem',
-            height:'3.01rem',
-            left:'1.2rem'
-          },
-          btnsStyle: {
-            top: "-1.61rem",
-            left:'3.2rem'
-          },
-        },
-        {
-          ele: "",
-          img: getImage("studentB2.png"),
-          handStyle: {
-            top: "-1.39rem",
-            left:'1.5rem',
-            transform: 'rotate(180deg)'
-          },
-          imgStyle: {
-            top: "-5.01rem",
-            width:'6.48rem',
-            height:'3.01rem',
-          },
-          btnsStyle: {
-            top: "-1.61rem",
-            left:'2.3rem',
-          },
-        },
-        {
-          ele: "",
-          img: getImage("studentB3.png"),
-          handStyle: {
-            top: "-1.39rem",
-            left:'1.4rem',
-            transform: 'rotate(180deg)'
-          },
-          imgStyle: {
-            top: "-4.5rem",
-            width:'6.48rem',
-            height:'3.01rem',
-            left:'-4.3rem'
+	name: "studentB-guide",
+	emits: ["close"],
+	setup(props, { emit }) {
+		const data = reactive({
+			box: {},
+			show: false,
+			steps: [
+				{
+					ele: "",
+					eleRect: {} as DOMRect,
+					img: getImage("studentB1.png"),
+					handStyle: {
+						top: "-1.39rem",
+						left: "1.4rem",
+						transform: "rotate(180deg)",
+					},
+					imgStyle: {
+						top: "-5.01rem",
+						width: "6.48rem",
+						height: "3.01rem",
+						left: "1.2rem",
+					},
+					btnsStyle: {
+						top: "-1.61rem",
+						left: "3.2rem",
+					},
+				},
+				{
+					ele: "",
+					img: getImage("studentB2.png"),
+					handStyle: {
+						top: "-1.39rem",
+						left: "1.5rem",
+						transform: "rotate(180deg)",
+					},
+					imgStyle: {
+						top: "-5.01rem",
+						width: "6.48rem",
+						height: "3.01rem",
+					},
+					btnsStyle: {
+						top: "-1.61rem",
+						left: "2.3rem",
+					},
+				},
+				{
+					ele: "",
+					img: getImage("studentB3.png"),
+					handStyle: {
+						top: "-1.39rem",
+						left: "1.4rem",
+						transform: "rotate(180deg)",
+					},
+					imgStyle: {
+						top: "-4.5rem",
+						width: "6.48rem",
+						height: "3.01rem",
+						left: "-4.3rem",
+					},
+					btnsStyle: {
+						top: "-1.1rem",
+						left: "-3.2rem",
+					},
+				},
+			],
+			step: 0,
+		});
+		const tipShow = ref(false);
+		const query: any = getQuery();
+		const guideInfo = localStorage.getItem("guideInfo");
+		if ((guideInfo && JSON.parse(guideInfo).studentB) || !query.showGuide) {
+			tipShow.value = false;
+		} else {
+			tipShow.value = true;
+		}
+		const steps = [ "modeType-0", "modeType-1", "modeType-2"];
+		const getStepELe = () => {
+			console.log(steps[data.step]);
+			const ele: HTMLElement = document.getElementById(steps[data.step])!;
+			if (ele) {
+				const eleRect = ele.getBoundingClientRect();
+				data.box = {
+					left: eleRect.x + "px",
+					top: eleRect.y + "px",
+					width: eleRect.width + "px",
+					height: eleRect.height + "px",
+				};
+			}
+		};
+		onMounted(() => {
+			getStepELe();
+		});
 
-          },
-          btnsStyle: {
-            top: "-1.1rem",
-            left:'-3.2rem',
-          },
-        },
-      ],
-      step: 0,
-    });
-    const tipShow = ref(false)
-    const query: any = getQuery();
-   const guideInfo = localStorage.getItem('guideInfo')
-   if(guideInfo&&JSON.parse(guideInfo).studentB || !query.showGuide){
-    tipShow.value =false
-   }else {
-    tipShow.value =true
-   }
-    const getStepELe = () => {
-      console.log(`studentB${data.step}`)
-      const ele: HTMLElement = document.getElementById(`studentB-${data.step}`)!;
-      if (ele) {
-        const eleRect = ele.getBoundingClientRect();
-        data.box = {
-          left: eleRect.x + "px",
-          top: eleRect.y + "px",
-          width: eleRect.width + "px",
-          height: eleRect.height + "px",
-        };
-      }
-    };
-    onMounted(() => {
-      getStepELe();
-    });
+		const handleNext = () => {
+			if (data.step >= 2) {
+				endGuide();
+				return;
+			}
+			data.step = data.step + 1;
+			getStepELe();
+		};
 
-
-
-    const handleNext = () => {
-      if (data.step >= 2) {
-       endGuide();
-        return;
-      }
-      data.step = data.step + 1;
-      getStepELe();
-    };
-
-    const endGuide = ()=>{
-      let guideInfo = JSON.parse(localStorage.getItem('guideInfo') || '{}') || null
-      if(!guideInfo){
-        guideInfo = {studentB:true}
-      }else{
-        guideInfo.studentB = true
-      }
-      localStorage.setItem('guideInfo',JSON.stringify(guideInfo))
-      tipShow.value = false
-    //  localStorage.setItem('endC')
-    }
-    return () => (
-      <Popup teleport="body" overlay={false} closeOnClickOverlay={false} class={["popup-custom", styles.guidePopup]} v-model:show={tipShow.value}>
-      <div class={styles.content} onClick={() => handleNext()}>
-      {data.step!=data.steps.length-1&&<div
-          class={styles.backBtn}
-          onClick={(e: Event) => {
-            e.stopPropagation();
-           endGuide()
-          }}
-        >
-     
-          跳过
-        </div>} 
-        <div class={styles.box} style={data.box} id={`modeType-${data.step}`}>
-          {data.steps.map((item: any, index) => (
-
-            <div
-              onClick={(e: Event) => e.stopPropagation()}
-              class={styles.item}
-              style={{
-                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}>
-                {data.step + 1 == data.steps.length ? (
-              <>
-              <div class={[styles.studentNext]}  onClick={() =>endGuide()}>
-              完成
-            </div>
-            <div
-              class={[styles.nextBtn]}
-              style={{ "border-color": "#fff" }}
-          
-              onClick={() => {
-                data.step = 0;
-                getStepELe();
-              }}
-            >
-              再看一遍
-            </div>
-        
-          </>
-        ) : (
-          <Button class={styles.studentNext} round type="primary" onClick={() => handleNext()}>
-
-            下一步 ({data.step + 1}/{data.steps.length})
-          </Button>
-        )}
-                
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-      </Popup>
-    );
-  },
+		const endGuide = () => {
+			let guideInfo = JSON.parse(localStorage.getItem("guideInfo") || "{}") || null;
+			if (!guideInfo) {
+				guideInfo = { studentB: true };
+			} else {
+				guideInfo.studentB = true;
+			}
+			localStorage.setItem("guideInfo", JSON.stringify(guideInfo));
+			tipShow.value = false;
+			//  localStorage.setItem('endC')
+		};
+		return () => (
+			<Popup
+				teleport="body"
+				overlay={false}
+				closeOnClickOverlay={false}
+				class={["popup-custom", styles.guidePopup]}
+				v-model:show={tipShow.value}
+			>
+				<div class={styles.content} onClick={() => handleNext()}>
+					{data.step != data.steps.length - 1 && (
+						<div
+							class={styles.backBtn}
+							onClick={(e: Event) => {
+								e.stopPropagation();
+								endGuide();
+							}}
+						>
+							跳过
+						</div>
+					)}
+					<div class={styles.box} style={data.box} id={`modeType-${data.step}`}>
+						{data.steps.map((item: any, index) => (
+							<div
+								onClick={(e: Event) => e.stopPropagation()}
+								class={styles.item}
+								style={{
+									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}>
+									{data.step + 1 == data.steps.length ? (
+										<>
+											<div class={[styles.studentNext]} onClick={() => endGuide()}>
+												完成
+											</div>
+											<div
+												class={[styles.nextBtn]}
+												style={{ "border-color": "#fff" }}
+												onClick={() => {
+													data.step = 0;
+													getStepELe();
+												}}
+											>
+												再看一遍
+											</div>
+										</>
+									) : (
+										<Button class={styles.studentNext} round type="primary" onClick={() => handleNext()}>
+											下一步 ({data.step + 1}/{data.steps.length})
+										</Button>
+									)}
+								</div>
+							</div>
+						))}
+					</div>
+				</div>
+			</Popup>
+		);
+	},
 });

src/page-instrument/custom-plugins/guide-page/teacher-bootom.tsx

@@ -15,9 +15,9 @@ export default defineComponent({
 			steps: [
 				{
 					eleRect: {
-           			left: '5rem',
-            top: '-3rem'
-          },
+						left: "5rem",
+						top: "-3rem",
+					},
 					img: getImage("aiTeacher1.png"),
 					imgStyle: {
 						width: "6.48rem",
@@ -27,25 +27,24 @@ export default defineComponent({
 						bottom: ".9rem",
 						left: "1.7rem",
 					},
-					boxStyle:{
-						borderRadius: '40px',
-						transform: 'scale(1)'
-						
+					boxStyle: {
+						borderRadius: "40px",
+						transform: "scale(1)",
 					},
 					eleRectPadding: {
 						left: 14,
 						top: 14,
 						width: 28,
-						height: 28
-					  }
+						height: 28,
+					},
 				},
 				{
 					img: getImage("aiTeacher2.png"),
-          eleRect: {
-            top: '-3rem'
-          },
+					eleRect: {
+						top: "-3rem",
+					},
 					imgStyle: {
-						left:'-0.7rem',
+						left: "-0.7rem",
 						width: "6.48rem",
 						height: "3.01rem",
 					},
@@ -53,18 +52,17 @@ export default defineComponent({
 						bottom: ".9rem",
 						left: "1rem",
 					},
-					boxStyle:{
-						borderRadius: '40px',
-						
+					boxStyle: {
+						borderRadius: "40px",
 					},
 				},
 				{
 					img: getImage("aiTeacher3.png"),
-          eleRect: {
-            top: '-3rem'
-          },
+					eleRect: {
+						top: "-3rem",
+					},
 					imgStyle: {
-						left:'-0.7rem',
+						left: "-0.7rem",
 						width: "6.48rem",
 						height: "3rem",
 					},
@@ -72,17 +70,16 @@ export default defineComponent({
 						bottom: ".9rem",
 						left: "1rem",
 					},
-					boxStyle:{
-						borderRadius: '40px',
-						
+					boxStyle: {
+						borderRadius: "40px",
 					},
 				},
 				{
 					img: getImage("aiTeacher4.png"),
-          eleRect: {
-            top: '-3rem',
-            left: '-1rem'
-          },
+					eleRect: {
+						top: "-3rem",
+						left: "-1rem",
+					},
 					imgStyle: {
 						width: "6.48rem",
 						height: "3.01rem",
@@ -93,9 +90,8 @@ export default defineComponent({
 						"justify-content": "center",
 						padding: 0,
 					},
-					boxStyle:{
-						borderRadius: '40px',
-						
+					boxStyle: {
+						borderRadius: "40px",
 					},
 				},
 			],
@@ -110,27 +106,27 @@ export default defineComponent({
 		} else {
 			tipShow.value = true;
 		}
-    const steps = ['modeType-box', 'modeType-0', 'modeType-1', 'modeType-2']
+		const steps = ["modeType-box", "modeType-0", "modeType-1", "modeType-2"];
 		const getStepELe = () => {
 			console.log(steps[data.step]);
 			const ele: HTMLElement = document.getElementById(steps[data.step])!;
 			if (ele) {
 				const eleRect = ele.getBoundingClientRect();
-		
+
 				const left = data.steps[data.step].eleRectPadding?.left || 0;
 				const top = data.steps[data.step].eleRectPadding?.top || 0;
 				const width = data.steps[data.step].eleRectPadding?.width || 0;
 				const height = data.steps[data.step].eleRectPadding?.height || 0;
 				data.box = {
-				  left: eleRect.x - left + 'px',
-				  top: eleRect.y - top + 'px',
-				  width: eleRect.width + width + 'px',
-				  height: eleRect.height + height + 'px'
+					left: eleRect.x - left + "px",
+					top: eleRect.y - top + "px",
+					width: eleRect.width + width + "px",
+					height: eleRect.height + height + "px",
 				};
 				console.log(`coai-${data.step}`, data.box);
-			  }else{
-				handleNext()
-			  }
+			} else {
+				handleNext();
+			}
 		};
 		onMounted(() => {
 			getStepELe();
@@ -164,17 +160,20 @@ export default defineComponent({
 				v-model:show={tipShow.value}
 			>
 				<div class={styles.content} onClick={() => handleNext()}>
-		<div
-          class={styles.backBtn}
-          onClick={(e: Event) => {
-            e.stopPropagation();
-           endGuide()
-          }}
-        >
-		
-          跳过
-        </div>
-					<div class={styles.box} style={{...data.box,...data.steps[data.step].boxStyle}} id={`modeType-${data.step}`}>
+					<div
+						class={styles.backBtn}
+						onClick={(e: Event) => {
+							e.stopPropagation();
+							endGuide();
+						}}
+					>
+						跳过
+					</div>
+					<div
+						class={styles.box}
+						style={{ ...data.box, ...data.steps[data.step].boxStyle }}
+						id={`modeType-${data.step}`}
+					>
 						{data.steps.map((item: any, index) => (
 							<div
 								onClick={(e: Event) => e.stopPropagation()}