Merge branch 'guide'

src/page-instrument/component/mode-type-mode/index.module.less

@@ -14,7 +14,7 @@
   .infoWrap{
     display: flex;
     flex-direction: row;
-    justify-content: space-around;
+    justify-content: space-between;
     width: 14.31rem;
     img{
       display: block;

src/page-instrument/custom-plugins/guide-page/index.module.less

@@ -144,10 +144,10 @@
         }
       }
       .nextBtn {
-        width: 74px;
+        width: 60px;
         height: 25px;
         background: url('./images/nextBtn.png') no-repeat;
-        background-size: 74px 25px;
+        background-size: 60px 25px;
         line-height: 25px;
         font-size: 9px;
         padding: 0;
@@ -167,7 +167,7 @@
         line-height: 25px;
         font-size: 9px;
         padding: 0;
-        margin-right:20px;
+        margin-right:10px;
         cursor: pointer;
         text-align: center;
         color: #fff;

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

@@ -6,178 +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.41rem",
-						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: "0.15rem",
-						transform: "rotate(180deg)",
-					},
-					imgStyle: {
-						top: "-5.01rem",
-						width: "6.48rem",
-						height: "3.01rem",
-					},
-					btnsStyle: {
-						top: "-1.61rem",
-						left: "1.3rem",
-					},
-				},
-				{
-					ele: "",
-					img: getImage("studentB3.png"),
-					handStyle: {
-						top: "-1.39rem",
-						left: "2.8rem",
-						transform: "rotate(180deg)",
-					},
-					imgStyle: {
-						top: "-4.5rem",
-						width: "6.48rem",
-						height: "3.01rem",
-						left: "-2.9rem",
-					},
-					btnsStyle: {
-						top: "-1.1rem",
-						left: "-1.8rem",
-					},
-				},
-			],
-			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;
-		}
+  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'
 
-		const getStepELe = () => {
-			console.log(`modeType${data.step}`);
-			const ele: HTMLElement = document.getElementById(`modeType-${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 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()}>
-					<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 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>
+    );
+  },
 });

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

@@ -23,13 +23,13 @@ export default defineComponent({
             left:'0.3rem'
           },
           imgStyle: {
-            top: "1.52rem",
+            top: "1.9rem",
             width:'5.64rem',
             height:'2.77rem',
             left:'-2rem'
           },
           btnsStyle: {
-            top: "4.6rem",
+            top: "4.9rem",
             left:'-0.7rem'
           },
         },
@@ -42,13 +42,13 @@ export default defineComponent({
   
           },
           imgStyle: {
-            top: "1.52rem",
-            width:'5.64rem',
+            top: "1.9rem",
+            width:'5.46rem',
             height:'2.77rem',
             left:'-2rem'
           },
           btnsStyle: {
-            top: "4.6rem",
+            top: "4.9rem",
             left:'-0.7rem'
           },
         },
@@ -60,7 +60,7 @@ export default defineComponent({
             left:'0.3rem',
           },
           imgStyle: {
-            top: "1.8rem",
+            top: "1.9rem",
             width:'5.46rem',
             height:'2.30rem',
             left:'-2rem'
@@ -98,13 +98,13 @@ export default defineComponent({
           },
           imgStyle: {
             top: "1.8rem",
-            width:'4.46rem',
+            width:'5.46rem',
             height:'2.6rem',
-            left:'-2rem'
+            left:'-3rem'
           },
           btnsStyle: {
             top: "4.6rem",
-            left:'-0.7rem'
+            left:'-1.3rem'
           },
         },
         {
@@ -141,8 +141,8 @@ export default defineComponent({
               left:'-5.5rem'
             },
             btnsStyle: {
-              top: "4.4rem",
-              left:'-2.7rem'
+              top: "4.2rem",
+              left:'-3.7rem'
             },
           },      {
             ele: "",
@@ -219,16 +219,18 @@ export default defineComponent({
     }
     return () => (
       <Popup teleport="body" overlay={false} closeOnClickOverlay={false} class={["popup-custom", styles.guidePopup]} v-model:show={tipShow.value}>
-      <div class={styles.content} onClick={() => handleNext()}>
-        <div
+<div class={styles.content} onClick={() => handleNext()}>
+{data.step!=data.steps.length-1&&<div
           class={styles.backBtn}
           onClick={(e: Event) => {
             e.stopPropagation();
            endGuide()
           }}
         >
+        
           跳过
-        </div>
+        </div>} 
+        
         <div class={styles.box} style={data.box} id={`modeType-${data.step}`}>
           {data.steps.map((item: any, index) => (
 
@@ -241,6 +243,7 @@ export default defineComponent({
                 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}>

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

@@ -15,7 +15,7 @@ export default defineComponent({
 			steps: [
 				{
 					eleRect: {
-            left: '5rem',
+           			left: '5rem',
             top: '-3rem'
           },
 					img: getImage("aiTeacher1.png"),
@@ -25,8 +25,19 @@ export default defineComponent({
 					},
 					btnsStyle: {
 						bottom: ".9rem",
-						left: "3rem",
+						left: "1.7rem",
+					},
+					boxStyle:{
+						borderRadius: '40px',
+						transform: 'scale(1)'
+						
 					},
+					eleRectPadding: {
+						left: 14,
+						top: 14,
+						width: 28,
+						height: 28
+					  }
 				},
 				{
 					img: getImage("aiTeacher2.png"),
@@ -34,12 +45,17 @@ export default defineComponent({
             top: '-3rem'
           },
 					imgStyle: {
+						left:'-0.7rem',
 						width: "6.48rem",
 						height: "3.01rem",
 					},
 					btnsStyle: {
 						bottom: ".9rem",
-						left: "3rem",
+						left: "1rem",
+					},
+					boxStyle:{
+						borderRadius: '40px',
+						
 					},
 				},
 				{
@@ -48,12 +64,17 @@ export default defineComponent({
             top: '-3rem'
           },
 					imgStyle: {
+						left:'-0.7rem',
 						width: "6.48rem",
 						height: "3rem",
 					},
 					btnsStyle: {
 						bottom: ".9rem",
-						left: "3rem",
+						left: "1rem",
+					},
+					boxStyle:{
+						borderRadius: '40px',
+						
 					},
 				},
 				{
@@ -72,6 +93,10 @@ export default defineComponent({
 						"justify-content": "center",
 						padding: 0,
 					},
+					boxStyle:{
+						borderRadius: '40px',
+						
+					},
 				},
 			],
 			step: 0,
@@ -91,13 +116,21 @@ export default defineComponent({
 			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 + "px",
-					top: eleRect.y + "px",
-					width: eleRect.width + "px",
-					height: eleRect.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()
+			  }
 		};
 		onMounted(() => {
 			getStepELe();
@@ -131,16 +164,17 @@ 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} 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()}

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

@@ -28,7 +28,7 @@ export default defineComponent({
           },
           btnsStyle: {
             top: "2.8rem",
-            left:'-0.7rem'
+            left:'-0.4rem'
           },
         },
         {
@@ -47,7 +47,7 @@ export default defineComponent({
           },
           btnsStyle: {
             top: "2.8rem",
-            left:'-0.7rem'
+            left:'-0.4rem'
           },
         },
         {
@@ -66,7 +66,7 @@ export default defineComponent({
           },
           btnsStyle: {
             top: "2.8rem",
-            left:'-0.7rem'
+            left:'-0.4rem'
           },
         },
         {
@@ -85,7 +85,7 @@ export default defineComponent({
           },
           btnsStyle: {
             top: "2.8rem",
-            left:'-0.7rem'
+            left:'-0.4rem'
           },
         },
         {
@@ -104,7 +104,7 @@ export default defineComponent({
           },
           btnsStyle: {
             top: "2.8rem",
-            left:'-0.7rem'
+            left:'-0.4rem'
           },
         },
         {
@@ -123,7 +123,7 @@ export default defineComponent({
           },
           btnsStyle: {
             top: "2.8rem",
-            left:'-1.8rem'
+            left:'-1.65rem'
           },
         },
       ],