Merge branch 'guide'

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

@@ -23,9 +23,14 @@ export default defineComponent({
             top: "1.5rem",
           },
           btnsStyle: {
-            top: "4.5rem",
+            top: "4.1rem",
             left:'1rem'
           },
+          boxStyle:{
+						borderRadius: '40px',
+						transform: 'scale(1)'
+
+					},
         },
         {
           ele: "",
@@ -71,12 +76,17 @@ export default defineComponent({
           },
           imgStyle: {
             top: "-4rem",
-            left:'-3.2rem',
+            left:'-3.7rem',
 
           },
+          boxStyle:{
+						borderRadius: '40px',
+						transform: 'scale(1.1)'
+
+					},
           btnsStyle: {
             top: "-1.4rem",
-            left: "-3.3rem",
+            left: "-3.8rem",
             "justify-content": "center",
             padding: 0,
           },
@@ -140,16 +150,17 @@ 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
+      {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}`}>
+        </div>}
+        <div class={styles.box} style={{...data.box,...data.steps[data.step].boxStyle}}  id={`modeType-${data.step}`}>
           {data.steps.map((item: any, index) => (
 
             <div
@@ -166,8 +177,11 @@ export default defineComponent({
               <div class={styles.btns} style={item.btnsStyle}>
                 {data.step + 1 == data.steps.length ? (
                   <>
+                                <Button class={[styles.btn]} round type="primary" onClick={() =>endGuide()}>
+                      完成
+                    </Button>
                     <Button
-                      class={styles.btn}
+                      class={[styles.btn,styles.endBtn]}
                       round
                       color="transparent"
                       style={{ "border-color": "#fff" }}
@@ -179,9 +193,7 @@ export default defineComponent({
                     >
                       再看一遍
                     </Button>
-                    <Button class={[styles.btn,styles.endBtn]} round type="primary" onClick={() =>endGuide()}>
-                      完成
-                    </Button>
+
                   </>
                 ) : (
                   <Button class={styles.btn} round type="primary" onClick={() => handleNext()}>

src/custom-plugins/guide-page/courseware-detail.tsx

@@ -18,7 +18,7 @@ export default defineComponent({
           img: getImage("courseware-detail1.png"),
           handStyle: {
             top: "-0.4rem",
-            left:"1.1rem",
+            left:"0.98rem",
             transform: 'rotate(-90deg)'
           },
           imgStyle: {
@@ -91,15 +91,16 @@ 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
+      {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) => (
 

src/custom-plugins/guide-page/courseware-list.tsx

@@ -18,24 +18,32 @@ export default defineComponent({
           img: getImage("courseware-list1.png"),
           handStyle: {
             top: "1.5rem",
-            left:"3.8rem",
+            left:"3.5rem",
             transform: 'rotate(-90deg)'
           },
           imgStyle: {
             top: ".7rem",
-            left:"4.8rem",
+            left:"5rem",
           },
           btnsStyle: {
             top: "3.5rem",
-            left:"6rem",
+            left:"6.2rem",
           },
+          boxStyle:{
+					},
+					eleRectPadding: {
+						left: -4,
+						top: -4,
+						width: -8,
+						height: -8
+					  }
         },
         {
           ele: "",
           img: getImage("courseware-list2.png"),
           handStyle: {
-            top: "-.3rem",
-            left:"1.3rem",
+            top: "-.25rem",
+            left:"1.38rem",
             transform: 'rotate(-90deg)'
           },
           imgStyle: {
@@ -47,29 +55,42 @@ export default defineComponent({
             top: "1.6rem",
             left:'3.6rem',
           },
+          eleRectPadding: {
+						left: 4,
+						top: 4,
+						width: 8,
+						height: 8
+					  }
         },
         {
           ele: "",
           img: getImage("courseware-list3.png"),
           handStyle: {
-            bottom: "-2rem",
-            left:'0.5rem',
+            bottom: "-2.1rem",
+            left:'0.66rem',
 
           },
           imgStyle: {
-            top: "1.2rem",
+            top: "1.1rem",
             left:'-2rem'
           },
           btnsStyle: {
             top:"4.2rem",
             left:'-0.5rem',
           },
+          eleRectPadding: {
+						left: 4,
+						top: 4,
+						width: 8,
+						height: 8
+					  }
+
         },
         {
           ele: "",
           img: getImage("courseware-list4.png"),
           handStyle: {
-            top: ".9rem",
+            top: ".8rem",
             left:'1rem',
 
           },
@@ -99,16 +120,22 @@ export default defineComponent({
       console.log(`courseware-${data.step}`)
       const ele: HTMLElement = document.getElementById(`courseware-${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",
-        };
-      }else{
-        handleNext()
-      }
+				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'
+				};
+				console.log(`coai-${data.step}`, data.box);
+			  }else{
+				handleNext()
+			  }
     };
     onMounted(() => {
       getStepELe();
@@ -145,16 +172,17 @@ 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
+      {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}`}>
+        </div>}
+        <div class={styles.box} style={{...data.box,...data.steps[data.step].boxStyle}} id={`modeType-${data.step}`}>
           {data.steps.map((item: any, index) => (
 
             <div
@@ -171,8 +199,11 @@ export default defineComponent({
               <div class={styles.btns} style={item.btnsStyle}>
                 {data.step + 1 == data.steps.length ? (
                   <>
+                     <Button class={[styles.btn]} round type="primary" onClick={() =>endGuide()}>
+                      完成
+                    </Button>
                     <Button
-                      class={styles.btn}
+                      class={[styles.btn,styles.endBtn]}
                       round
                       color="transparent"
                       style={{ "border-color": "#fff" }}
@@ -184,13 +215,10 @@ export default defineComponent({
                     >
                       再看一遍
                     </Button>
-                    <Button class={[styles.btn,styles.endBtn]} round type="primary" onClick={() =>endGuide()}>
-                      完成
-                    </Button>
+
                   </>
                 ) : (
                   <Button class={styles.btn} round type="primary" onClick={() => handleNext()}>
-
                     下一步 ({data.step + 1}/{data.steps.length})
                   </Button>
                 )}

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

@@ -45,6 +45,9 @@ export default defineComponent({
             top: "4.5rem",
 
           },
+          boxStyle:{
+            transform: 'scale(1)'
+          },
         },
         {
           ele: "",
@@ -62,6 +65,9 @@ export default defineComponent({
             top: "7.5rem",
             left:'1.3rem',
           },
+          boxStyle:{
+            transform: 'scale(1)'
+          },
         },
       ],
       step: 0,
@@ -85,7 +91,7 @@ export default defineComponent({
       }
     };
     onMounted(() => {
-      setTimeout(()=>{
+
         const guideInfo = localStorage.getItem('guideInfo')
         if(guideInfo&&JSON.parse(guideInfo).knowledge){
          tipShow.value =false
@@ -93,7 +99,7 @@ export default defineComponent({
          tipShow.value =true
         }
         getStepELe();
-      },300)
+
       window.addEventListener("resize", resetSize);
     });
     const resetSize = ()=>{
@@ -127,15 +133,16 @@ 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
-          class={[styles.backBtn,styles.right]}
+      {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) => (
 

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

@@ -18,7 +18,7 @@ export default defineComponent({
           eleRect: {} as DOMRect,
           img: getImage("woring1.png"),
           handStyle: {
-            top: "2.7rem",
+            top: "2.98rem",
             left:'4.5rem'
           },
           imgStyle: {
@@ -29,13 +29,16 @@ export default defineComponent({
             top: "6.2rem",
             left:'3.5rem'
           },
+          boxStyle:{
+            transform: 'scale(1)'
+          },
         },
         {
           ele: "",
           eleRect: {} as DOMRect,
           img: getImage("woring2.png"),
           handStyle: {
-            top: "2.7rem",
+            top: "2.98rem",
             left:'4.5rem'
           },
           imgStyle: {
@@ -46,12 +49,15 @@ export default defineComponent({
             top: "6.2rem",
             left:'3.5rem'
           },
+          boxStyle:{
+            transform: 'scale(1)'
+          },
         },
         {
           ele: "",
           img: getImage("woring3.png"),
           handStyle: {
-            top: "-1.43rem",
+            top: "-1.39rem",
             left:'4.5rem',
             transform: 'rotate(180deg)'
           },
@@ -63,6 +69,9 @@ export default defineComponent({
             top: "-2.4rem",
             left:'2.5rem'
           },
+          boxStyle:{
+            transform: 'scale(1)'
+          },
         },
       ],
       step: 0,
@@ -127,16 +136,17 @@ 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
-          class={[styles.backBtn,styles.right]}
+      {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}`}>
+        </div>}
+        <div class={styles.box} style={{...data.box,...data.steps[data.step].boxStyle}} id={`modeType-${data.step}`}>
           {data.steps.map((item: any, index) => (
 
             <div

src/views/courseware-list/index.module.less

@@ -3,7 +3,8 @@
   width: 100vw;
   height: 100vh;
   overflow: hidden;
-  background: url('../../common/images/icon_bg.png') no-repeat center center / cover;
+  background: url('../../common/images/icon_bg.png') no-repeat center center /
+    cover;
   display: flex;
   flex-direction: column;
 }
@@ -14,7 +15,7 @@
   align-items: center;
   justify-content: space-between;
   padding: 19px 23px 8px 41px;
-  transition: opacity .3s ease-in-out;
+  transition: opacity 0.3s ease-in-out;
 
   .back {
     img {
@@ -25,7 +26,7 @@
   .tabs {
     :global {
       .van-tab {
-        color: rgba(255, 255, 255, .9);
+        color: rgba(255, 255, 255, 0.9);
         font-size: 15px;
         padding: 0 16px;
 
@@ -50,7 +51,7 @@
 .downBtn {
   width: 84px;
   height: 32px;
-  background: #F8F9FC;
+  background: #f8f9fc;
   border-radius: 16px;
   border: none;
   padding: 0;
@@ -79,13 +80,13 @@
     width: 8px;
     height: 5px;
     margin-left: 4px;
-    transition: transform .2s ease;
+    transition: transform 0.2s ease;
   }
 
   .iconUp {
     color: var(--van-primary-color);
     transform: rotate(180deg);
-    transition: transform .2s ease;
+    transition: transform 0.2s ease;
   }
 }
 
@@ -113,7 +114,6 @@
   }
 }
 
-
 .content {
   flex: 1;
   overflow-y: hidden;
@@ -159,36 +159,38 @@
     margin-bottom: 15px;
     width: 100%;
     height: 170px;
-    background-color: #EDEFF2;
-    box-shadow: 0 5px 14Px rgba(0,0,0,0.4);
+    background-color: #edeff2;
+    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.4);
+    img {
+      position: absolute;
+    }
     &::before {
-      content: "";
+      content: '';
       position: absolute;
-      top: 4Px;
-      right: -4Px;
-      width: 4Px;
-      height: calc(100% - 8Px);
+      top: 4px;
+      right: -4px;
+      width: 4px;
+      height: calc(100% - 8px);
       background-color: #c5c5c5;
       z-index: 1;
     }
 
     &::after {
-      content: "";
+      content: '';
       position: absolute;
-      top: 2Px;
-      right: -2Px;
-      width: 4Px;
-      height: calc(100% - 4Px);
+      top: 2px;
+      right: -2px;
+      width: 4px;
+      height: calc(100% - 4px);
       background-color: #e7e7e7;
       z-index: 2;
     }
   }
 
-
   .name {
     font-size: 11px;
     font-weight: 400;
-    color: #FFFFFF;
+    color: #ffffff;
     line-height: 16px;
     text-align: center;
   }
@@ -210,22 +212,22 @@
   &::before {
     content: '';
     position: absolute;
-    top: 4Px;
-    right: -4Px;
-    width: 4Px;
-    height: calc(100% - 8Px);
-    background-color: #C5C5C5;
+    top: 4px;
+    right: -4px;
+    width: 4px;
+    height: calc(100% - 8px);
+    background-color: #c5c5c5;
     z-index: 1;
   }
 
   &::after {
     content: '';
     position: absolute;
-    top: 2Px;
-    right: -2Px;
-    width: 4Px;
-    height: calc(100% - 4Px);
-    background-color: #E7E7E7;
+    top: 2px;
+    right: -2px;
+    width: 4px;
+    height: calc(100% - 4px);
+    background-color: #e7e7e7;
     z-index: 2;
   }
 }
@@ -250,7 +252,18 @@
     height: 100%;
     z-index: 2;
     background-repeat: no-repeat;
-    background-image: linear-gradient(to right, rgba(0, 0, 0, .2) 0, rgba(255, 255, 255, .08) 0%, transparent .5%), linear-gradient(to right, rgba(0, 0, 0, .1) .3%, rgba(255, 255, 255, .09) 1.1%, transparent 1.3%);
+    background-image: linear-gradient(
+        to right,
+        rgba(0, 0, 0, 0.2) 0,
+        rgba(255, 255, 255, 0.08) 0%,
+        transparent 0.5%
+      ),
+      linear-gradient(
+        to right,
+        rgba(0, 0, 0, 0.1) 0.3%,
+        rgba(255, 255, 255, 0.09) 1.1%,
+        transparent 1.3%
+      );
     background-size: 50% 100%, 50% 100%;
     background-position: 0% top, 9% top;
   }
@@ -260,16 +273,14 @@
       width: 100%;
       height: 100%;
       opacity: 0;
-      transition: opacity .3s ease-in-out;
+      transition: opacity 0.3s ease-in-out;
     }
   }
 
-
   &.loaded {
     img {
       opacity: 1;
     }
-
   }
 }
 
@@ -281,11 +292,11 @@
   transform: translate(-50%, -50%) scale(0);
   z-index: 20;
   background-color: #fff;
-  transition: all .3s ease-in-out;
+  transition: all 0.3s ease-in-out;
   visibility: hidden;
   pointer-events: none;
   border-radius: 8px;
-  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .2);
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
 
   .bookWrap {
     height: 60vh;
@@ -302,4 +313,4 @@
     pointer-events: auto;
     transform: translate(-50%, -50%) scale(1);
   }
-}
+}

src/views/knowledge-library/index.tsx

@@ -1,6 +1,6 @@
 import MHeader from '@/components/m-header';
 import MSticky from '@/components/m-sticky';
-import { defineComponent, onMounted, reactive } from 'vue';
+import { defineComponent, onMounted, reactive, ref } from 'vue';
 import styles from './index.module.less';
 import { useRoute, useRouter } from 'vue-router';
 import { Button, Collapse, CollapseItem, Image, showToast } from 'vant';
@@ -16,7 +16,7 @@ export default defineComponent({
   setup() {
     const router = useRouter();
     const route = useRoute();
-
+    const showGuide = ref()
     const forms = reactive({
       cid: route.query.cid,
       list: [] as any,
@@ -39,6 +39,7 @@ export default defineComponent({
           }
         );
         forms.list = data;
+        showGuide.value = true
       } catch {
         //
       }
@@ -177,7 +178,7 @@ export default defineComponent({
             ))}
           </Collapse>
         </div>
-        <KnowledgeGuide></KnowledgeGuide>
+        {showGuide.value && <KnowledgeGuide></KnowledgeGuide>}
       </div>
     );
   }