学生端完成

1

src/components/m-sticky/index.tsx

@@ -49,7 +49,6 @@ export default defineComponent({
     const __initHeight = (height: any) => {
       forms.sectionStyle.height = `${height}px`;
       forms.heightV = height;
-
       // 设置名称
       document.documentElement.style.setProperty(props.varName, `${height}px`);
       emit('barHeight', height);

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

@@ -5,7 +5,7 @@ import styles from "./index.module.less";
 import { getImage } from "./images";
 
 export default defineComponent({
-  name: "tips-tip1",
+  name: "coai-guide",
   emits: ["close"],
   setup(props, { emit }) {
     const data = reactive({
@@ -118,7 +118,7 @@ export default defineComponent({
     };
 
     const endGuide = ()=>{
-      let guideInfo = JSON.parse(localStorage.getItem('guideInfo'))
+      let guideInfo = JSON.parse(localStorage.getItem('guideInfo') || '') || null
       if(!guideInfo){
         guideInfo = {coaiGuide:true}
       }else{

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

@@ -0,0 +1,141 @@
+import { Button, Popup } from "vant";
+import { } from "vant";
+import { defineComponent, nextTick, onMounted, reactive, ref, watch } from "vue";
+import styles from "./index.module.less";
+import { getImage } from "./images";
+
+export default defineComponent({
+  name: "courseware-detail",
+  emits: ["close"],
+  setup(props, { emit }) {
+    const data = reactive({
+      box: {},
+      show: false,
+      steps: [
+        {
+          ele: "",
+          eleRect: {} as DOMRect,
+          img: getImage("courseware-detail1.png"),
+          handStyle: {
+            top: "-0.4rem",
+            left:"1.1rem",
+            transform: 'rotate(-90deg)'
+          },
+          imgStyle: {
+            top: "-1.3rem",
+            left:"2.2rem",
+          },
+          btnsStyle: {
+            top: "1.5rem",
+            left:"3.5rem",
+          },
+        },
+
+      ],
+      step: 0,
+    });
+    const tipShow = ref(false)
+   const guideInfo = localStorage.getItem('guideInfo')
+   if(guideInfo&&JSON.parse(guideInfo).coursewareDetail){
+    tipShow.value =false
+   }else {
+    tipShow.value =true
+   }
+    const getStepELe = () => {
+      console.log(`coursewareDetail-${data.step}`)
+      const ele: HTMLElement = document.getElementById(`coursewareDetail-${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 >= 3) {
+       endGuide();
+        return;
+      }
+      data.step = data.step + 1;
+      getStepELe();
+    };
+
+    const endGuide = ()=>{
+      let guideInfo = JSON.parse(localStorage.getItem('guideInfo')) || null
+      if(!guideInfo){
+        guideInfo = {coursewareDetail:true}
+      }else{
+        guideInfo.coursewareDetail = 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 ? (
+                  <>
+                    {/* <Button
+                      class={styles.btn}
+                      round
+                      color="transparent"
+                      style={{ "border-color": "#fff" }}
+                      type="primary"
+                      onClick={() => {
+                        data.step = 0;
+                        getStepELe();
+                      }}
+                    >
+                      再看一遍
+                    </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>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+      </Popup>
+    );
+  },
+});

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

@@ -0,0 +1,195 @@
+import { Button, Popup } from "vant";
+import { } from "vant";
+import { defineComponent, nextTick, onMounted, reactive, ref, watch } from "vue";
+import styles from "./index.module.less";
+import { getImage } from "./images";
+
+export default defineComponent({
+  name: "courseware-list",
+  emits: ["close"],
+  setup(props, { emit }) {
+    const data = reactive({
+      box: {},
+      show: false,
+      steps: [
+        {
+          ele: "",
+          eleRect: {} as DOMRect,
+          img: getImage("courseware-list1.png"),
+          handStyle: {
+            top: "1.5rem",
+            left:"3.8rem",
+            transform: 'rotate(-90deg)'
+          },
+          imgStyle: {
+            top: ".7rem",
+            left:"4.8rem",
+          },
+          btnsStyle: {
+            top: "3.5rem",
+            left:"6rem",
+          },
+        },
+        {
+          ele: "",
+          img: getImage("courseware-list2.png"),
+          handStyle: {
+            top: "-.3rem",
+            left:"1.3rem",
+            transform: 'rotate(-90deg)'
+          },
+          imgStyle: {
+            top: "-1.2rem",
+            left:"2.4rem",
+
+          },
+          btnsStyle: {
+            top: "1.6rem",
+            left:'3.6rem',
+          },
+        },
+        {
+          ele: "",
+          img: getImage("courseware-list3.png"),
+          handStyle: {
+            bottom: "-2rem",
+            left:'0.5rem',
+
+          },
+          imgStyle: {
+            top: "1.2rem",
+            left:'-2rem'
+          },
+          btnsStyle: {
+            top:"4.2rem",
+            left:'-0.5rem',
+          },
+        },
+        {
+          ele: "",
+          img: getImage("courseware-list4.png"),
+          handStyle: {
+            top: ".9rem",
+            left:'1rem',
+
+          },
+          imgStyle: {
+            top: "1.1rem",
+            left:'-4.6rem',
+
+          },
+          btnsStyle: {
+            top: "4rem",
+            left: "-4.5rem",
+            "justify-content": "center",
+            padding: 0,
+          },
+        },
+      ],
+      step: 0,
+    });
+    const tipShow = ref(false)
+   const guideInfo = localStorage.getItem('guideInfo')
+   if(guideInfo&&JSON.parse(guideInfo).courseware){
+    tipShow.value =false
+   }else {
+    tipShow.value =true
+   }
+    const getStepELe = () => {
+      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",
+        };
+      }
+    };
+    onMounted(() => {
+      getStepELe();
+    });
+
+    const handleNext = () => {
+      if (data.step >= 3) {
+       endGuide();
+        return;
+      }
+      data.step = data.step + 1;
+      getStepELe();
+    };
+
+    const endGuide = ()=>{
+      let guideInfo = JSON.parse(localStorage.getItem('guideInfo')) || null
+      if(!guideInfo){
+        guideInfo = {courseware:true}
+      }else{
+        guideInfo.courseware = 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 ? (
+                  <>
+                    <Button
+                      class={styles.btn}
+                      round
+                      color="transparent"
+                      style={{ "border-color": "#fff" }}
+                      type="primary"
+                      onClick={() => {
+                        data.step = 0;
+                        getStepELe();
+                      }}
+                    >
+                      再看一遍
+                    </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>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+      </Popup>
+    );
+  },
+});

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

@@ -36,6 +36,14 @@
     opacity: 0.8;
   }
 }
+.backBtn.right {
+  width: 60px;
+  line-height: 24px;
+  padding: 0 14px;
+  right: 14px;
+  top: 21px;
+  left: auto;
+}
 
 .content {
   position: relative;
@@ -47,7 +55,7 @@
   position: fixed;
   box-shadow: rgba(33, 33, 33, 0.8) 0px 0px 0px 5000px;
   transition: all 0.25s;
-  // transform: scale(1.3);
+  transform: scale(1.2);
   border-radius: 8px;
 }
 

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

@@ -0,0 +1,178 @@
+import { Button, Popup } from "vant";
+import { } from "vant";
+import { defineComponent, nextTick, onMounted, reactive, ref, watch } from "vue";
+import styles from "./index.module.less";
+import { getImage } from "./images";
+import { useRect } from "@vant/use";
+
+export default defineComponent({
+  name: "knowledge-guide",
+  emits: ["close"],
+  setup(props, { emit }) {
+    const data = reactive({
+      box: {},
+      show: false,
+      steps: [
+        {
+          ele: "",
+          eleRect: {} as DOMRect,
+          img: getImage("knowledge1.png"),
+          handStyle: {
+            top: "1.3rem",
+            left:'1.5rem'
+          },
+          imgStyle: {
+            top: "1.9rem",
+          },
+          btnsStyle: {
+            top: "4.5rem",
+            left:'1rem'
+          },
+        },
+        {
+          ele: "",
+          eleRect: {} as DOMRect,
+          img: getImage("knowledge2.png"),
+          handStyle: {
+            top: "1.3rem",
+            left:'1.5rem'
+          },
+          imgStyle: {
+            top: "1.9rem",
+            left:'-1.5rem'
+          },
+          btnsStyle: {
+            top: "4.5rem",
+
+          },
+        },
+        {
+          ele: "",
+          img: getImage("knowledge3.png"),
+          handStyle: {
+            top: "4.1rem",
+            left:'3.6rem',
+
+          },
+          imgStyle: {
+            top: "4.8rem",
+            left:'1.2rem',
+          },
+          btnsStyle: {
+            top: "7.5rem",
+            left:'1.3rem',
+          },
+        },
+      ],
+      step: 0,
+    });
+    const tipShow = ref(false)
+
+    const getStepELe = () => {
+      console.log(`knowledge-${data.step}`)
+      const ele: HTMLElement = document.getElementById(`knowledge-${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(() => {
+      setTimeout(()=>{
+        const guideInfo = localStorage.getItem('guideInfo')
+        if(guideInfo&&JSON.parse(guideInfo).knowledge){
+         tipShow.value =false
+        }else {
+         tipShow.value =true
+        }
+        getStepELe();
+      },300)
+
+    });
+
+    const handleNext = () => {
+      if (data.step >= 3) {
+       endGuide();
+        return;
+      }
+      data.step = data.step + 1;
+      getStepELe();
+    };
+
+    const endGuide = ()=>{
+      let guideInfo = JSON.parse(localStorage.getItem('guideInfo'))
+
+      if(!guideInfo){
+        guideInfo = {knowledge:true}
+      }else{
+        guideInfo.knowledge = 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,styles.right]}
+          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 ? (
+                  <>
+                    <Button
+                      class={styles.btn}
+                      round
+                      color="transparent"
+                      style={{ "border-color": "#fff" }}
+                      type="primary"
+                      onClick={() => {
+                        data.step = 0;
+                        getStepELe();
+                      }}
+                    >
+                      再看一遍
+                    </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>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+      </Popup>
+    );
+  },
+});

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

@@ -0,0 +1,178 @@
+import { Button, Popup } from "vant";
+import { } from "vant";
+import { defineComponent, nextTick, onMounted, reactive, ref, watch } from "vue";
+import styles from "./index.module.less";
+import { getImage } from "./images";
+import { useRect } from "@vant/use";
+
+export default defineComponent({
+  name: "woring",
+  emits: ["close"],
+  setup(props, { emit }) {
+    const data = reactive({
+      box: {},
+      show: false,
+      steps: [
+        {
+          ele: "",
+          eleRect: {} as DOMRect,
+          img: getImage("woring1.png"),
+          handStyle: {
+            top: "2.7rem",
+            left:'4.5rem'
+          },
+          imgStyle: {
+            top: "3.3rem",
+            left:'2.1rem'
+          },
+          btnsStyle: {
+            top: "6.2rem",
+            left:'3.5rem'
+          },
+        },
+        {
+          ele: "",
+          eleRect: {} as DOMRect,
+          img: getImage("woring2.png"),
+          handStyle: {
+            top: "2.7rem",
+            left:'4.5rem'
+          },
+          imgStyle: {
+            top: "3.3rem",
+            left:'2.1rem'
+          },
+          btnsStyle: {
+            top: "6.2rem",
+            left:'3.5rem'
+          },
+        },
+        {
+          ele: "",
+          img: getImage("woring3.png"),
+          handStyle: {
+            top: "2.7rem",
+            left:'4.5rem'
+          },
+          imgStyle: {
+            top: "3.3rem",
+            left:'2.1rem'
+          },
+          btnsStyle: {
+            top: "6.2rem",
+            left:'2.5rem'
+          },
+        },
+      ],
+      step: 0,
+    });
+    const tipShow = ref(false)
+
+    const getStepELe = () => {
+
+      const ele: HTMLElement = document.getElementById(`woring-${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(() => {
+      setTimeout(()=>{
+        const guideInfo = localStorage.getItem('guideInfo')
+        if(guideInfo&&JSON.parse(guideInfo).woring){
+         tipShow.value =false
+        }else {
+         tipShow.value =true
+        }
+        getStepELe();
+      },300)
+
+    });
+
+    const handleNext = () => {
+      if (data.step >= 3) {
+       endGuide();
+        return;
+      }
+      data.step = data.step + 1;
+      getStepELe();
+    };
+
+    const endGuide = ()=>{
+      let guideInfo = JSON.parse(localStorage.getItem('guideInfo'))
+
+      if(!guideInfo){
+        guideInfo = {woring:true}
+      }else{
+        guideInfo.woring = 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,styles.right]}
+          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 ? (
+                  <>
+                    <Button
+                      class={styles.btn}
+                      round
+                      color="transparent"
+                      style={{ "border-color": "#fff" }}
+                      type="primary"
+                      onClick={() => {
+                        data.step = 0;
+                        getStepELe();
+                      }}
+                    >
+                      再看一遍
+                    </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>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+      </Popup>
+    );
+  },
+});

src/views/courseware-list/component/book/index.tsx

@@ -4,7 +4,8 @@ import {
   nextTick,
   onMounted,
   reactive,
-  watch
+  watch,
+  ref
 } from 'vue';
 import styles from './index.module.less';
 import icon_back from '../../image/icon_back.svg';
@@ -13,7 +14,7 @@ import { useRouter } from 'vue-router';
 import { postMessage } from '@/helpers/native-message';
 import { showToast } from 'vant';
 import queryString from 'query-string';
-
+import CoursewareDetail from '@/custom-plugins/guide-page/courseware-detail'
 export default defineComponent({
   name: 'the-book',
   props: {
@@ -40,6 +41,7 @@ export default defineComponent({
       transform: '',
       list: [] as any[][]
     });
+    const showGuide = ref(false)
     const handleCreate = (key: string, url: string) => {
       return new Promise((resolve, reject) => {
         const _s = document.head.querySelector(`script[data-key="${key}"]`);
@@ -100,14 +102,21 @@ export default defineComponent({
         bookWrap.style.transform = data.transform = transform;
         bookWrap.style.transition = 'transform 0s';
         nextTick(() => {
+
           requestAnimationFrame(() => {
             requestAnimationFrame(() => {
               bookWrap.style.transition = 'transform 1s';
               bookWrap.style.transform = '';
               data.show = true;
               timer = setTimeout(() => {
+
                 book.turn('page', 2);
+
               }, 500);
+
+              setTimeout(() => {
+                showGuide.value = true;
+              }, 1500)
             });
           });
         });
@@ -215,8 +224,9 @@ export default defineComponent({
                   <div class="page">
                     <div class="gradient"></div>
                     <div class={styles.wrap}>
-                      {list.map((item: any) => {
-                        return (
+                      {list.map((item: any, index: number) => {
+                        return <>
+
                           <div
                             class={[styles.item, item.id && styles.des]}
                             onTouchstart={(e: TouchEvent) => {
@@ -226,12 +236,13 @@ export default defineComponent({
                               e.stopPropagation();
                               handleOpenPlay(item);
                             }}>
-                            <div class={styles.name}>{item.name}</div>
+                            <div class={styles.name} >{item.name}</div>
                             {item.id ? (
-                              <img class={styles.icon} src={icon_play} />
+                              <img id={index == 1 ? 'coursewareDetail-0' : ''} class={styles.icon} src={icon_play} />
                             ) : null}
                           </div>
-                        );
+
+                        </>
                       })}
                     </div>
                   </div>
@@ -243,7 +254,11 @@ export default defineComponent({
             </div>
           )}
         </div>
+        {showGuide.value ? <CoursewareDetail></CoursewareDetail> : null}
+
       </div>
     );
   }
 });
+
+

src/views/courseware-list/index.tsx

@@ -3,7 +3,8 @@ import {
   defineComponent,
   onBeforeMount,
   onMounted,
-  reactive
+  reactive,
+  ref
 } from 'vue';
 import styles from './index.module.less';
 import icon_back from './image/icon_back.svg';
@@ -22,7 +23,7 @@ import TheFavorite from '@/components/the-favorite';
 import { useRouter } from 'vue-router';
 import TheBook from './component/book';
 import { postMessage } from '@/helpers/native-message';
-
+import CoursewareList from '@/custom-plugins/guide-page/courseware-list'
 import './jquery.min.1.7.js';
 import './turn.js';
 
@@ -72,7 +73,7 @@ export default defineComponent({
       forms.currentGradeNum = index;
       handleChange();
     };
-
+const isShowGuide = ref(false)
     const data = reactive({
       list: [] as any[],
       favoriteList: [] as any[],
@@ -97,6 +98,7 @@ export default defineComponent({
           return item;
         });
       }
+      isShowGuide.value = true
     };
     const getFavoriteList = async () => {
       const res = await api_lessonCoursewareFavoriteage({
@@ -196,8 +198,10 @@ export default defineComponent({
             class={styles.tabs}
             v-model:active={data.tab}
             onChange={() => handleChange()}>
-            <Tab title="全部教材" name="all"></Tab>
-            <Tab title="我的收藏" name="favorite"></Tab>
+            <Tab title="全部教材"   name="all"></Tab>
+            <Tab  name="favorite" v-slots={{
+              title:() => (<div id='courseware-2'>我的收藏</div>)
+            }}></Tab>
           </Tabs>
           <Popover
             class={styles.popover}
@@ -205,7 +209,7 @@ export default defineComponent({
             onSelect={onSelect}>
             {{
               reference: () => (
-                <Button class={styles.downBtn} round size="small">
+                <Button class={styles.downBtn} round size="small" {...{id:'courseware-3'}} >
                   {BOOK_DATA.grades[forms.currentGradeNum].text}{' '}
                   <img class={styles.icon} src={icon_arrow} />
                 </Button>
@@ -227,8 +231,10 @@ export default defineComponent({
                   ]}
                   key={item.key}
                   onClick={() => handleOpen(item)}>
-                  <NImage
+                    {/* courseware- */}
+                    {index==0?<NImage
                     data-id={item.id}
+                    id='courseware-0'
                     class={[styles.cover, item.load ? styles.loaded : '']}
                     objectFit="cover"
                     src={item.coverImg}
@@ -238,9 +244,22 @@ export default defineComponent({
                     onError={() => {
                       item.load = true;
                     }}
-                  />
+                  />:        <NImage
+                  data-id={item.id}
+                  class={[styles.cover, item.load ? styles.loaded : '']}
+                  objectFit="cover"
+                  src={item.coverImg}
+                  onLoad={() => {
+                    item.load = true;
+                  }}
+                  onError={() => {
+                    item.load = true;
+                  }}
+                />}
+
                   <div class={styles.name}>{item.name}</div>
-                  <div
+                  {index==0? <div
+                   id='courseware-1'
                     class={styles.favoriteBtn}
                     onClick={(e: Event) => {
                       e.stopPropagation();
@@ -249,7 +268,17 @@ export default defineComponent({
                       dubounce(() => handleFavorite(item));
                     }}>
                     <TheFavorite isFavorite={data.tab !== 'all' ? true : item.favoriteFlag} />
-                  </div>
+                  </div>: <div
+                    class={styles.favoriteBtn}
+                    onClick={(e: Event) => {
+                      e.stopPropagation();
+                      if (data.tab !== 'all') return;
+                      item.favoriteFlag = !item.favoriteFlag;
+                      dubounce(() => handleFavorite(item));
+                    }}>
+                    <TheFavorite isFavorite={data.tab !== 'all' ? true : item.favoriteFlag} />
+                  </div>}
+
                 </div>
               );
             })}
@@ -264,6 +293,8 @@ export default defineComponent({
             data.showBook = false;
           }}
         />
+        {isShowGuide.value? <CoursewareList></CoursewareList>:null}
+
       </div>
     );
   }

src/views/knowledge-library/index.module.less

@@ -8,10 +8,10 @@
     display: flex;
     align-items: center;
     height: 24px;
-    background: #FFFFFF;
+    background: #ffffff;
     border-radius: 12px;
     font-size: 14px;
-    color: #0E71BC;
+    color: #0e71bc;
     padding: 0 8px;
 
     .iconWroing {
@@ -44,7 +44,10 @@
     display: inline-block;
     width: 139px;
     height: 49px;
-    border: none
+    border: none;
+    &:hover {
+      opacity: 0.8;
+    }
   }
 
   .btnPractice {
@@ -60,7 +63,7 @@
 }
 
 .containerSection {
-  background: #87D1F0;
+  background: #87d1f0;
   border-radius: 20px 20px 0px 0px;
   padding: 15px;
 
@@ -109,7 +112,7 @@
         height: 14px;
         border-radius: 2px;
         margin-right: 6px;
-        background: linear-gradient(to bottom, #259CFE, #3FC2FF);
+        background: linear-gradient(to bottom, #259cfe, #3fc2ff);
       }
 
       span {
@@ -125,7 +128,7 @@
     position: relative;
     max-height: 154px;
 
-    &+.unitItem {
+    & + .unitItem {
       margin-top: 12px;
     }
 
@@ -155,4 +158,4 @@
     width: 100%;
     max-height: 154px;
   }
-}
+}

src/views/knowledge-library/index.tsx

@@ -9,7 +9,7 @@ import library1 from './images/library-1.png';
 import library2 from './images/library-2.png';
 import library3 from './images/library-3.png';
 import { useEventListener, useWindowScroll } from '@vueuse/core';
-
+import KnowledgeGuide from '@/custom-plugins/guide-page/knowledge-guide'
 export default defineComponent({
   name: 'knowledge-ligrary',
   setup() {
@@ -122,14 +122,17 @@ export default defineComponent({
         </MSticky>
 
         <div class={styles.btnGroup}>
-          <Button
+
+          <div id='knowledge-0'
             class={styles.btnPractice}
-            round
-            onClick={() => onGotoModel('PRACTICE')}></Button>
-          <Button
+
+            onClick={() => onGotoModel('PRACTICE')}></div>
+
+          <div
+            id='knowledge-1'
             class={styles.btnTest}
-            round
-            onClick={() => onGotoModel('TEST')}></Button>
+
+            onClick={() => onGotoModel('TEST')}></div>
         </div>
 
         <div class={[styles.containerSection, styles.librarySection]}>
@@ -152,6 +155,16 @@ export default defineComponent({
                           }
                         })
                       }>
+                      {index == 0 ? <Image
+                        id='knowledge-2'
+                        class={styles.unitImg}
+                        lazyLoad
+                        src={getBg(index)}
+                      /> : <Image
+                        class={styles.unitImg}
+                        lazyLoad
+                        src={getBg(index)}
+                      />}
                       <Image
                         class={styles.unitImg}
                         lazyLoad
@@ -166,6 +179,7 @@ export default defineComponent({
             ))}
           </Collapse>
         </div>
+        <KnowledgeGuide></KnowledgeGuide>
       </div>
     );
   }

src/views/knowledge-library/wroing-book/index.tsx

@@ -10,7 +10,7 @@ import WoringStat from './images/woring-stat.png';
 import request from '@/helpers/request';
 import { browser } from '@/helpers/utils';
 import { postMessage } from '@/helpers/native-message';
-
+import WoringGuide from '@/custom-plugins/guide-page/woring-guide';
 export default defineComponent({
   name: 'wroing-book',
   setup() {
@@ -75,6 +75,7 @@ export default defineComponent({
 
         <div class={styles.woringSecgtion}>
           <Image
+            {...{ id: 'woring-0' }}
             lazyLoad
             src={WoringStat}
             class={styles.woringImg}
@@ -82,18 +83,21 @@ export default defineComponent({
           />
           {/* 错题练习 */}
           <Image
+            {...{ id: 'woring-1' }}
             lazyLoad
             src={WoringPractice}
             class={styles.woringImg}
             onClick={onErrorPractice}
           />
           <Image
+            {...{ id: 'woring-2' }}
             lazyLoad
             src={AiExam}
             class={styles.woringImg}
             onClick={() => router.push('ai-exam')}
           />
         </div>
+        <WoringGuide></WoringGuide>
       </div>
     );
   }